Workflows Supported
A CSS variable lets you place the value for a style in one place and reuse it throughout a stylesheet. As with other kinds of single-sourcing, this can help with speed, ease of use, and consistency. Whenever you want to change the value, you only need to do so in one place and the new value is propagated everywhere that the variable is referenced. You certainly could use the "find and replace" feature instead to change the value, but CSS variables are preferred because you won’t need to worry about inconsistencies in your stylesheet. For example, some values—such as colors—can be written in various ways, so in those cases CSS variables make a lot of sense.
Of course, color isn't the only place where you can use CSS variables; they can be used for all kinds of properties. But color might be where CSS variables are most commonly seen, so in this section we are mainly using color to illustrate how CSS variables work.
Basics of CSS Variables
You can easily spot a CSS variable. It is any property that begins with two dashes.
--my-css-variable: green;A CSS variable is sometimes called a “custom variable” because you can use whatever name you want (but don’t use spaces), rather than always adhering to standard CSS property names such as “color,” “width,” and “font-size.” For example, you might have a CSS variable written like this in order to identify your company’s primary branding color.
--main-company-color: #bed420;When a CSS variable is referenced by another property, it is done so with the var() function.
color: var(--main-company-color);You can define a CSS variable either locally or globally. A locally defined CSS variable is set on a particular selector.
.banner-text
{
--main-company-color: #bed420;
}On the other hand, a globally defined CSS variable is set on the :root selector.
:root
{
--main-company-color: #bed420;
}Most of the time you will probably use the :root selector for your CSS variables. It’s a good way to group all of your CSS variables in one place. Also, the variables become available throughout the stylesheet and content files (i.e., the variables are global).
Following are some other important considerations of CSS variables:
- Normal rules of inheritance and cascading apply to CSS variables.
- They are case-sensitive, so make sure you are consistent when creating and using them.
Note For more detailed information about CSS variables, you can refer to numerous third-party websites on the internet.
Example You have three fonts that you use throughout your stylesheet: Roboto Light, Roboto Medium, and Roboto Dark. Instead of setting these specific fonts in all those places, you decide to create three CSS variables for each of these: LightFont, MediumFont, DarkFont.
To start, you add these three CSS variables on the :root HTML element.
Next, you insert each of these CSS variables, where appropriate, on properties throughout the stylesheet.
A year later, your company decides to change the font families from Roboto to Segoe UI. Therefore, you open the stylesheet, navigate to (Variables) > :root and change the values for the three CSS variables.
You don’t need to do anything else. You will see that all of the styles pointing to these CSS variables are updated automatically when you generate the output.