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:
[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.
you can set the value through the
setProperty()method on the style object
Which makes #1 possible and opens up cool possibilities.
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.