To use a custom property as a variable, we need to use the var() function. For instance, if we wanted to use our –primarycolor custom property as a background color, we’d do the following:
body {
background-color: var(–primarycolor);
}
Our custom property’s value will become the computed value of the background-color property.
To date, custom properties can only be used as variables to set values for standard CSS properties. You can’t, for example, store a property name as a variable and then reuse it. The following CSS won’t work:
:root {
–top-border: border-top; /* Can’t set a property as custom property’s value */ var(–top-border): 10px solid #bc84d8; /* Can’t use a variable as a property */
}
You also can’t store a property-value pair as a variable and reuse it. The following example is also invalid:
:root {
–text-color: ‘color: orange’; /* Invalid property value */
}
body {
var(–text-color); /* Invalid use of a property */
}
Lastly, you can’t concatenate a variable as part of a value string:
:root {
–base-font-size: 10;
}
body {
font: var(–base-font-size)px / 1.25 sans-serif; /* Invalid CSS syntax */
}
“Custom properties” is a future-proof name that accounts for how this feature might be used someday. This could change, however, should the CSS Extensions specification be implemented by browser vendors. That specification defines ways to extend CSS with custom selector combinations, functions, and at-rules.
We commonly call custom properties “variables”, and to date, that’s the only way we can use them. In theory, they’re not entirely interchangeable terms. In practice and for now, they are. I’ll mostly use custom properties in this chapter, since that’s their proper name. I’ll use variables when it makes the sentence clearer.
1. Setting a Fallback Value
The var() function accepts up to two arguments. The first argument should be a custom property name. The second argument is optional, but must be a declaration value. This declaration value functions as a fallback or default value that’s applied when the custom property value isn’t defined.
Let’s take the following CSS:
.btn_ call-to-action {
background: var(–accent-color, deepskyblue);
}
If –accent-cotor is defined—let’s say its value is #f30 —then the fill color for any path with a .btn__ catt-to-action class attribute will have a red-orange fill. If it’s not defined, the fill will be a deep sky blue.
Declaration values can also be nested. In other words, you can use a variable as the fallback value for the var function:
body {
background-color: var(–books-bg, var(–arts-bg));
}
In the CSS above, if –books-bg is defined, the background color will be set to the value of the –books-bg property. If not, the background color will instead be whatever value was assigned to –arts-bg . If neither of those are defined, the background color will be the initial value for the property—in this case, transparent .
Something similar happens when a custom property has a value that’s invalid for the property it’s used with. Consider the following CSS:
:root {
–text-primary: #600;
–footer-link-hover: #0cg; /* Not a valid color value */
}
body {
color: var(–text-primary);
}
a:link {
color: blue;
}
a:hover {
color: red;
}
footer a:hover {
color: var(–footer-link-hover);
}
In this case, the value of the –footer-link-hover property is not a valid color. Instead, footer a:hover inherits its color from that of the <body> element.
Custom properties are resolved in the same way other CSS values are resolved. If the value is invalid or undefined, the CSS parser will use the inherited value if the property is inheritable (such as color or font ), and the initial value if it’s not (as with background-color ).
Source: Brown Tiffany B (2021), CSS , SitePoint; 3rd edition.