CSS is being expanded all the time by the W3C CSS working group and having new features added. One of the features currently under development are Custom Properties, better known as Variables. They are definitely among the most missed and frequently demanded features in CSS.
“Who needs variables? What are variables anyway?” are the questions that some of you are now perhaps asking. Variables actually enable us to store and manage centrally certain values that frequently occur in our CSS definitions (e.g. a particular color, a certain font or even a particular spacing).
Imagine that you have set a particular accent color for your website, e.g.
#f60. If you want to assign this color to different elements on your
page — such as text areas or borders — you need to insert them again every time (and
therefore also remember the hex value every time :-). But the most important thing
is that when you want to change this color in your CSS document, you need to do it
for each single occurrence! On the other hand, variables allow you
to set the color just once in a central place in your document. When you
change the variable, the color will automatically change throughout your entire CSS
document. (Some of you may already be familiar with this principle from graphics and
layout programs such as Illustrator or InDesign as global colors.)
So-called CSS preprocessors such as LESS or SASS have already been supporting variables for a considerable time, which means that they have definitely become an essential component in modern web design. Variables can now also be used natively in CSS. Although it is still rather too early to deploy them in the production process,5 they are, nevertheless, already supported by many of the latest browsers (Firefox 31, Chrome 49, Safari 9.1, Opera 36 — but not IE).
5 Unless you use a CSS postprocessor — the opposite of
the preprocessors mentioned above;-) — such as cssnext
The use of variables always requires two steps to be completed:
You basically define variables in the following manner:
Put two dashes in front of a name of your own choice (as always, without any spaces or special characters). You then assign, as usual, the value after a colon.
You must always define variables within a selector. But we will look at this in more detail later on.
Once you have defined your variables, you can use them anywhere as often as you want. The following example shows how you do this:
After the keyword var, insert the name of the desired variable in round brackets (without any spaces).
When defining variables, you must differentiate between global and local variables. Global variables apply to the whole document and can therefore be used in any CSS property. This is probably the most commonly used method. Local variables only apply within a particular selector and can therefore only be used for a particular element.
When you define global variables, you use the document root
:root as the selector. This is basically equivalent to the html
selector and means “all elements”.
As already mentioned, variables defined using this method apply to the whole CSS document. You can assign them as a value to any CSS property.
In contrast, you define local variables within a particular selector, e.g.
They then apply only within this selector. You cannot use the variable for other selectors. In this case, therefore, the definition and assignment appear in the same selector:
exercise 9 provides a good example of the benefit of using variables. Let’s take a look at the relevant sections of the CSS code again:
In this case, we have four values that are repeatedly used in the document:
Repeatedly using the same values is prone to causing errors. They are easy to miss when making a change. The use of variables greatly simplifies the task in this case:
You will find the whole example file in the support material under