title: how to use CSS variable which has multiple property
body: <p>I am currently working on a react project which uses DSM invision for the UI design, basicly, DSM provides a css file '_style-params' which contains style variables.</p>
  
  <pre><code>--color-primary: #00a2ff;
  --color-secondary: #6c757d;
  --color-success: #28a745;
  --color-danger: #dc3545;
  </code></pre>
  
  <p>for this kind is easy to understand and use, i can just import the css file into my main css file and write:</p>
  
  <pre><code>background-color:var(--color-primary);
  </code></pre>
  
  <p>However, when it comes to font, I have some question:
  below is from _style-params.css:</p>
  
  <pre><code>/* 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);
  };
  </code></pre>
  
  <p>Am I able to just use following varible (which is a object)</p>
  
  <pre><code>var(--font-button-fonts-default-5-warning)
  </code></pre>
  
  <p>I dunno which property to use this variable, i tried following:</p>
  
  <pre><code>font:var(--font-button-fonts-default-5-warning)
  </code></pre>
  
  <p>which is not working (obviously).
  So, am I able to use this object CSS varible? 
  or I have to use the individual variables?</p>