how to use CSS variable which has multiple property

Question

I am currently working on a react project which uses DSM inVision for the UI design, basically, DSM provides a CSS file '_style-params' which contains style variables.

--color-primary: #00a2ff;
--color-secondary: #6c757d;
--color-success: #28a745;
--color-danger: #dc3545;

This usage is easy; I can just import the CSS file into my main CSS file and write:

background-color:var(--color-primary);

However, when it comes to font, I have some questions:

below is from _style-params.css:

/* button fonts/default/5-warning font style */
--font-button-fonts-default-5-warning-font-size: 16px;
--font-button-fonts-default-5-warning-line-height: 14px;
--font-button-fonts-default-5-warning-text-align: center;
--font-button-fonts-default-5-warning-color: #f0ad4e;
--font-button-fonts-default-5-warning-letter-spacing: 0.2px;
--font-button-fonts-default-5-warning-font-style: normal;
--font-button-fonts-default-5-warning-font-weight: 400;
--font-button-fonts-default-5-warning-font-family: Roboto;

--font-button-fonts-default-5-warning: {
  font-size: var(--font-button-fonts-default-5-warning-font-size);
  line-height: var(--font-button-fonts-default-5-warning-line-height);
  text-align: var(--font-button-fonts-default-5-warning-text-align);
  color: var(--font-button-fonts-default-5-warning-color);
  letter-spacing: var(--font-button-fonts-default-5-warning-letter-spacing);
  font-style: var(--font-button-fonts-default-5-warning-font-style);
  font-weight: var(--font-button-fonts-default-5-warning-font-weight);
  font-family: var(--font-button-fonts-default-5-warning-font-family);
};

Am I able to just use following varible (which is a object)

var(--font-button-fonts-default-5-warning)

I dunno which property to use this variable, i tried following:

font:var(--font-button-fonts-default-5-warning)

which is not working (obviously).

So, am I able to use this object CSS variable? Or do I have to use the individual variables?

Answer 1

There is no object concept in CSS variables. You need to use them individually but you can also combine them in the same variable that you can use later relying on the shothand notation of properties.

Example:

:root {
/* button fonts/default/5-warning font style */
--button-font-size: 30px;
--button-line-height: 14px;
--button-text-align: center;
--button-color: #f0ad4e;
--button-letter-spacing: 0.2px;
--button-font-style: normal;
--button-font-weight: 400;
--button-font-family: "Roboto";

--button:  
    var(--button-font-style)
    var(--button-font-weight)
    var(--button-font-size)/
    var(--button-line-height)
    var(--button-font-family);
}
.warning {
  font:var(--button);
  color: var(--button-color);
  letter-spacing: var(--button-letter-spacing);
  text-align:var(--button-text-align);
}

<p>text here</p>
<p class="warning">text here</p>

We can use almost all the values inside font but not color, letter-spacing and text-align; you need to use them individually.