title: Can I assign a CSS variable to another?
body: <p>Can I assign one globally defined CSS variable to another locally define variable?</p>
  
  <p>For example, the variable <code>--dark</code> has been globally defined as <code>black</code>.</p>
  
  <p>Then, I want to be able to do:</p>
  
  <pre><code>:root {
      --background-color: --dark
  }
  
  .light {
      --background-color: white
  }
  
  div {
     background-color: --background-color
  }
  </code></pre>
  
  <p>So that by default, my <code>div</code> will have a black background. And when the class <code>light</code> is added to it, it will have a white background.</p>
  
  <p>I need the 'default' <code>--dark</code> variable here because it is a theme variable.</p>