The heart of tech

This article was published on February 8, 2016


CSS variables are finally landing in Chrome to help you clean up your code

CSS variables are finally landing in Chrome to help you clean up your code
Owen Williams
Story by

Owen Williams

Former TNW employee

Owen was a reporter for TNW based in Amsterdam, now a full-time freelance writer and consultant helping technology companies make their word Owen was a reporter for TNW based in Amsterdam, now a full-time freelance writer and consultant helping technology companies make their words friendlier. In his spare time he codes, writes newsletters and cycles around the city.

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.

Screen Shot 2016-02-08 at 11.27.02 AM
CSS Variables in action

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.

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]