Advantages to Native CSS Variables

I tend to think variables are best left to a preprocessing step, but there are some distinct things that having them directly in CSS can do:

1. Daniel Imms:

   [they] can change at runtime, allowing the implementation of things like theming to be done more elegantly.

   i.e. change the value of a variable on a live, rendered web page and see the changes reflected everywhere that uses that variable.

2. Peter Gasston:

   you can set the value through the setProperty() method on the style object

   Which makes #1 possible and opens up cool possibilities.

3. They can be scoped to an element. So perhaps you could set variables representing color to theme a site, but override them at a component level to apply different themes in smaller places as needed.

Direct Link →