CSS variables are finally landing in Chrome to help you clean up your code
Developers who have built any size Website have had this problem: when you need to change one of your brand’s colors it’s no easy feat, requiring a risky search and replace or hunting down every instance of its use.
To get around the clutter, most developers have switched to using preprocessors like SASS or LESS which support creating variables by converting them when the processor is run over your code.
The problem is that this is not done at runtime with these libraries, so you’re not able to change these colors in real time without recompiling your stylesheets.
Chrome 49 is getting full support for CSS variables so developers will able to define a variable to be used throughout their code and can be changed in realtime — and doesn’t require any additional compiling.
CSS variables are very new though have been in the works for years — but they’re not widely supported yet. Only Chrome 49, Firefox 43+, Safari 9.1 and iOS 9.3 support the standard with no roadmap for Microsoft Edge, Opera or Android.
Still, given that Chrome is used by more than half of people online, it’s likely to quickly gain momentum among other browsers.