Why use CSS variables?

First of all, the use of CSS variables makes it easier to read. Who knows what "#3f6aea" means? Not many people! On the other hand, if I record this hexadecimal value in a variable called "royal blue", it is much easier to understand what it corresponds to. ? The second and perhaps most important point concerns maintenance. Indeed, on the day you would like to use a slightly different royal blue, you will have to replace each line indicating "#3f6aea" with the new hexadecimal chosen.  On the other hand, if you have stored it in a variable, you only need to modify the value of the variable to make the changes everywhere. Pre-processors such as SASS or LESS have been offering a variable system for CSS for some time now. In addition, they offer other significant advantages, such as more efficient nesting, Mixins or even small loops. However, these tools also have a serious disadvantage, compilation. Indeed, you’re SASS or LESS file must be transformed into a CSS file in order to be interpreted by web browsers. This compilation phase, complicating things, is of course not necessary in pure CSS.

Compatibility with web browsers

As usual, browsers take their time in terms of compatibility of new features. Firefox, Google Chrome, Safari and Opera play the game well since they have been accepting CSS variables for a while now. It's on the Microsoft side that things are going badly wrong. Indeed, although Edge supports this new feature since version 15.0, unfortunately CSS variables do not work on Internet Explorer.... Browsers supporting CSS variables:

• Firefox: 31.0
• Google Chrome: 49.0
• Microsoft Edge: 15.0
• Safari: 9.1
• Opera: 36.0

How to use CSS variables?

Now that you are convinced of the usefulness of CSS variables, let's see how to use them. First of all, a little word on the subject of inheritance. It should be noted that there is nothing special to report. Indeed, the CSS variable is inherited in the same way as a normal CSS value. Learning by example is often much more effective than endless theories. That is why I have prepared 5 small examples covering different cases.