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.
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.
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
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.
Sample illustrating the use of CSS Custom Properties (CSS Variables).googlechrome.github.io
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 ( email@example.com), 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
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.