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.

The 💜 of EU tech

The latest rumblings from the EU tech scene, a story from our wise ol' founder Boris, and some questionable AI art. It's free, every week, in your inbox. Sign up now!

Developers can now declare a variable by using double dashes, for example ‘–primary-color: #ccc‘ and then call them by using the var() function elsewhere. Chrome also supports using these new custom variables in JavaScript without any issues.

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.

➤ CSS Variables [Google Developers]