CSS Variable Overriding Behavior

Note how the composed variable behaves when you specify an override at a shallower depth

by Andrew Holloway

HTML

<p class="root">Test</p>
<p class="root-2">
Test 2
</p>

CSS

:root {
  --test-font: sans-serif;
  --test-style: 600 3em/1.6666666 var(--test-font);
  --test-color: red;
}

.root {
  --test-font: fantasy;
  --test-color: blue;
  
  font: var(--test-style);
  color: var(--test-color);
}

.root-2 {
  --test-font: serif;
  --test-color: rebeccapurple;
  
  font: var(--test-style);
  font-family: var(--test-font);
  color: var(--test-color);
}