title: How can I make a CSS variable that is defined using another variable reflect changes to the dependency?
body: <p>I'd like to use CSS variables to define some compound properties. In this example, I'm defining a <code>--border-width</code> variable as well as a <code>--border</code> variable that uses the <code>--border-width</code> variable. I then override the border width value on certain elements:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>:root {
    --border-width: 1px;
    --border: var(--border-width) solid #000;
  }
  
  .demo {
    border: var(--border);
    margin: 1em;
  }
  
  .demo.active {
    --border-width: 10px; 
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="demo"&gt;
    Should have thin border
  &lt;/div&gt;
  
  &lt;div class="demo active"&gt;
    Should have thick border
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>I know that the new variable is being applied to the element; I can see it in the inspector and if I add an explicit <code>border-width: var(--border-width)</code> property to <code>.demo</code>, it applies the expected width value. However, it appears that <code>--border</code> hasn't been recalculated to reflect the change to <code>--border-width</code>.</p>
  
  <p>I don't want each of my elements to have to specify all of the longhand properties each time I use something with a shorthand, but it seems like I'm missing something fundamental about CSS variables.</p>
  
  <p>For example, I'd prefer to not have to do this:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>:root {
    --border-width: 1px;
    --border-style: solid;
    --border-color: #000;
  }
  
  .demo {
    border: var(--border-width) var(--border-style) var(--border-color);
    
    /*
    Or this
    
    border-width: var(--border-width);
    border-style: var(--border-style);
    border-color: var(--border-color);
    */
    
    margin: 1em;
  }
  
  .demo.active {
    --border-width: 10px; 
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="demo"&gt;
    Should have thin border
  &lt;/div&gt;
  
  &lt;div class="demo active"&gt;
    Should have thick border
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>