CSS Variables Coming to a Browser Near You

If you’ve not been hiding under a rock for the last few years, you’ll know one of the major reasons people love preprocessors like Sass is that they bring variables to CSS. No more find and replace to change colours, font sizes and the like, we just assign these via helpfully named variables like “darkred” (that after a few iterations somehow has tuned a lovely shade of blue).

These variables however, as helpful as they are, are simply syntactic sugar. Before they’re served to the browser, they’ve already been turned back into plain old CSS. But genuine CSS variables (or more correctly known as custom properties) are making their way into browsers today. But custom properties aren’t just Sass variables in the browser, they follow the rules of cascading and can be manipulated via JavaScript in the DOM.

slides [https://www.slideshare.net/secret/JIgU7O3Uy9MitB]

CSS variables have recently gone from “coming soon” to “stable implementation” in Chrome, Firefox, Opera and Safari, with Edge perhaps not far behind.

 

One of the major reasons people love preprocessors like Sass is that they bring variables to CSS. No more find and replace to change colours, font sizes and the like, we just assign these via helpfully named variables.

 

Before they’re served to the browser, however, these variables have already been turned back into plain CSS. Genuine CSS variables (more correctly known as custom properties) are making their way into browsers today, follow the rules of cascading and can be manipulated via JavaScript in the DOM.