CSS Variables Coming to a Browser Near You

About this presentation

<span style="font-weight: 400;">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).</span> <span style="font-weight: 400;">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.</span>