A Guide to CSS Variables

05.05.2023 — custom-properties, css-variables — 3 min read

Introduction

CSS Variables, also known as Custom Properties, are a relatively new feature in CSS that allow us to define and reuse values throughout our stylesheets. They were introduced in CSS3 and are now supported by all major browsers. With CSS Variables, we can declare a value once and use it multiple times throughout our stylesheet, making our code more modular and flexible.

What are CSS Variables?

CSS Variables, also known as Custom Properties, allow us to declare a value once and use it multiple times throughout our stylesheet. They are defined using the -- prefix, followed by a variable name and a value:

1:root {
2  --main-color: #333;
3}
4
5h1 {
6  color: var(--main-color);
7}

In the above example, we've defined a variable named --main-color and assigned it a value of #333. We then use this variable to set the color of all h1 elements. By using a variable, we can easily change the value of --main-color in one place and have it update everywhere it is used in our stylesheet.

Why/When to use CSS Variables?

CSS Variables offer many benefits, such as:

Modularity: Variables allow us to define a value once and use it multiple times throughout our stylesheet, making our code more modular and easier to maintain.
Flexibility: With variables, we can easily change the value of a property in one place and have it update everywhere it is used in our stylesheet.
Consistency: Variables allow us to define values that are used throughout our entire project, ensuring consistency in our design.
Scalability: As our project grows, variables allow us to quickly and easily make global changes to our design.

How to use CSS Variables?

Defining Variables

To define a CSS Variable, we use the :root pseudo-class to declare the variable in the highest level of the document tree. This ensures that the variable is available globally throughout our stylesheet:

1:root {
2  --main-color: #333;
3}

We can then use the var() function to reference the variable in our styles:

1h1 {
2  color: var(--main-color);
3}

Cascading Variables

CSS Variables also support cascading, which means that a variable can inherit its value from a parent element:

1:root {
2  --main-color: #333;
3}
4
5.container {
6  --main-color: blue;
7}
8
9h1 {
10  color: var(--main-color);
11}

In the above example, we've defined a variable named --main-color in the :root element with a value of #333. We then define a variable with the same name in the .container element with a value of blue. When we use the variable in our h1 style, it will inherit the value of the closest --main-color variable, which in this case is the one defined in the .container element.

Calculations

CSS Variables also support calculations, which allows us to perform math operations on the values of our variables. Let's say we want to create a button that has a padding of 10 pixels on the top and bottom, and twice that amount on the left and right. We could use CSS Variables to make this more modular and easy to change. Here's an example:

1:root {
2  --button-padding: 10px;
3  --button-horizontal-padding: calc(var(--button-padding) * 2);
4}
5
6button {
7  padding: var(--button-padding) var(--button-horizontal-padding);
8}

In the example above, we define two variables using CSS Variables: --button-padding and --button-horizontal-padding. We set --button-padding to 10px, and then set --button-horizontal-padding to be twice that amount using the calc() function. Finally, we apply these variables to our button's padding property using the var() function.

If we wanted to change the amount of padding, we could simply update the --button-padding variable, and the --button-horizontal-padding variable would update automatically. This would ensure that our button maintains the same padding ratio, even if we change the value of --button-padding.

Using Variables in JavaScript

In addition to using variables in CSS, we can also manipulate and access them in JavaScript. We can use the getComputedStyle() method to get the value of a CSS variable:

1const mainColor = getComputedStyle(document.documentElement).getPropertyValue(
2  "--main-color"
3);
4console.log(mainColor); // #333

We can also update the value of a CSS variable using the setProperty() method:

1document.documentElement.style.setProperty("--main-color", "red");

This will change the value of the --main-color variable to red.

Review

In this blog post, we've explored the power and flexibility of CSS Variables or Custom Properties. We've learned what CSS Variables are and how to define, reference, and manipulate them in our stylesheets and JavaScript. By using variables, we can make our code more modular, flexible, and easier to maintain, while ensuring consistency and scalability in our designs. With the support of all major browsers, we can start using CSS Variables in our projects today and take advantage of their many benefits.