Using CSS Custom Properties / CSS Variables

What are CSS Custom Properties / Variables — Why Use Them?

Variables are ways to hold pieces of information that can be used throughout your code. They are an integral part of any programming language and are now something that we can also use within our CSS. Whether it is for something as simple as defining our color / font sizes to help craft custom color themes, we can use CSS Variables to not only help manage our code better, but also to give us some more control over things.

CSS Variables can be defined at either the global scope, if you wish for them to be available anywhere throughout your CSS, or they can be defined at the local scope, if you only wish for them to be available in a specific block of code. Regardless of where you choose to define them, CSS Variables will cascade down through their children (like other CSS properties).

What makes CSS Variables really appealing to use is because you don’t have to completely re-write your style properties when you want to change something, you simply have to change the value of the variable. This allows us to not really have to worry about the specificity of our selectors. It also allows us to target specific areas of certain properties instead of having to completely re-write them when we want to change them (i.e if you want to change the angle of a linear gradient on hover, instead of re-writing out the whole linear gradient style, you can just use a variable in place of the angle and just update the variable as necessary). Also, we can use CSS Variables in conjunction with the calc function to do some pretty interesting and powerful things.

Example of declaring a global CSS Variable, at the root level, and assigning it to the body’s background-color property.

Differences between CSS Variables / SASS / LESS Variables

Now, I know you may be thinking to yourself, hey don’t we already have SASS / LESS Variables, don’t those do the same thing? Yes, SASS / LESS Variables are a thing but they do not function in the same way. Let’s take a look at some of the differences between them:

Different syntax for declaration and retrieving values

Whereas SASS and LESS use $ and @, respectively, to define their vaiables, CSS Variables use a double dash (--) to define their variables (i.e --bgcolor, --fontSize). Also, when you wish to reference the variable in a property value, you would use the following var(--variableName) (i.e background-color: var(--bgcolor);).

SASS / LESS Variables — static, compiled before run-time

SASS Variables are a great way to organize your CSS but unfortunately there is no way for us to get to them once our site is running, they are static. Our SCSS code is run through a pre-processor (i.e Prepros etc) to generate our CSS code. It is at this time that the SASS Variables are processed and swapped out for their values. After that, the SASS Variables serve no more purpose, they can no longer be accessed.

CSS Variables — dynamic, compiled at runtime, can be manipulated with JavaScript

CSS Variables, on the other hand, are compiled at run-time of the site, giving us access to them while the user is on the site. CSS Variables are aware of the DOM and thus, can be accessed through JavaScript, giving us a great deal of flexibility with them and making them much more dynamic as well.

This isn’t to say that you have to choose between one or the other though. They both serve their own, separate purposes and can be used together to bring together your site.

Examples of CSS Variables In Effect

Example of using CSS Variables in a CSS Animation

In the above example, I have created a simple CSS animation of a number of snowflakes falling at different speeds. I have created a global variable called --modifier at the root level which I am using in place of the delay value in the animation. I have it plugged into a calc function to help give me the different rates of fall. On the page there is a slider that controls the value for the --modifier variable. When you slide it to the right, it increases the --modifier, increasing the delay and slowing down the animation, and if you slide it to the left, it decreases the --modifier, speeding up the animation. In the JavaScript, there is just a short function to listen for a change in the slider and then pops that value into the --modifier.

An simple example showing how colour themes can be applied to your site using CSS Variables

The next example I made is a simple version showing how we can use CSS Variables to bring some customization and fun to the user through colour themes. Typically before, when you wanted to create some different colour themes for your website, depending on the size / complexity of your site, you would either need to write a large amount of code to re-write a number of different properties or even sometimes have separate stylesheets for each theme. CSS Variables can help alleviate some of that headache and streamline the process.

I have created three global variables at the root level, --bgcolor, --textcolor and --divcolor. Then , on the page, I made two different ways to apply a theme. I made buttons for if you wanted to apply a “premade theme” you designed and colour picker inputs for if you wanted to give the user more control over their colour choices. Again, the JavaScript behind it is very simple, just an event listening for input on either the button (and applying the value to all three variables at once) or the colour picker (and applying the value to that specific variable).

The final example is one that I found that I thought really showed off some of the fun things you can do using CSS Variables. Created by ( shans@chromium.org), this example takes a few CSS Variables, along with the calc function to not only initally layout a page but also to allow the user to change some of the layout, including spacing between items and even the amount of columns the page is laid out to. I thought that this example just really showed off some of the creative and fun ways you could make your page a bit more dynamic and allow your user to customize their experience.

Support / Conclusion

Current support for CSS Variables at time of writing

The support for CSS Variables is currently pretty good, with all modern browsers supporting it and older IE versions and Opera Mini being the only holdouts. If you still need to support those browsers, then I would suggest maybe holding off for now (normally, I would just suggest to wrap them in an @supports but that also seems to not be supported by IE11 as well :D) but if you have the support for it, go nuts.

I for one am excited to start trying out using CSS Variables in some of my projects going forward to bring some interesting tweaks and changes.