CSS Custom Properties (Variables) Variable Cascading
Example
CSS variables cascade in much the same way as other properties, and can be restated safely.
You can define variables multiple times and only the definition with the highest specificity will apply to the element selected.
Assuming this HTML:
<a class="button">Button Green</a>
<a class="button button_red">Button Red</a>
<a class="button">Button Hovered On</a>
We can write this CSS:
.button {
--color: green;
padding: .5rem;
border: 1px solid var(--color);
color: var(--color);
}
.button:hover {
--color: blue;
}
.button_red {
--color: red;
}
And get this result:
