Google announced on Monday that CSS variables, more accurately known as CSS custom properties, are going to roll out in Chrome 49. This new development will help you clean your code and permit powerful runtime effects.
Generally, when working with a website, it’s kind of a chore to change themes, colour codes or anything else for that matter. It’s almost like finding and successfully removing a needle from a haystack in most cases. To avoid this unnecessary game of cat and mouse, developers generally use CSS preprocessors like SASS or LESS which solve this problem through the use of preprocessor variables. These tools have been quite handy but they come with a major drawback. The variables used in this approach are static and cannot be changed at runtime.
This means that developers will be restricted in a way in which they have to stop the operation of their project in order to make even the slightest of changes.
Google thinks, as do we, that this is a huge issue. And in order to address it, the company said that Chrome 49 will come in with support for CSS variables.
CSS custom properties will allow a developer to define a variable and use it throughout their code. This variable can be altered in realtime and it doesn’t require any additional compiling.
The syntax for a custom property is straightforward. Here’s what it looks like:
--header-color: #06c;
Once defined properties can be called anywhere in the whole program by using the var() function. Here’s the syntax for that:
var(<custom-property-name> [, <declaration-value> ]? )The new feature, Google says, works well with JavaScript too.
Currently, Chrome 49, Firefox 42, Safari 9.1 and iOS Safari 9.3 support CSS variables and other platforms may soon start catching up too. For a glimpse of how custom properties work, head right here.
