How to use Variables in CSS

In this article, we are going to see how to use variables in CSS. Using variables allows you to quickly reference, update your styles, instead of writing styles again and again. This allows you to store global styling in one place and you can quickly edit them if you need to. Saving your time to edit in multiple locations.

What are variables in CSS?

In general computer science, a variable is a unit that stores a value. You can create, edit, update, delete variables. Likewise, CSS also has variable functionality that you can use. CSS variables allows you to create global variables, which you can quickly reference to, without having to copy styles, making duplicates of the same thing. Using variables also makes it easier to understand. For example, –main-bg-color is easier to understand than #D3D3D3.

How to define a CSS variable?

The var() function defines variable in CSS.

Traditional Method

Without using variables in CSS, we are most likely going to repeat ourselves again and again for common styles. For example:

body { background-color: #1e90ff; }

h2 { border-bottom: 2px solid #1e90ff; }

button {
background-color: #ffffff;
color: #1e90ff;
border: 1px solid #1e90ff;
padding: 5px;
}

See, how we have used same values for background-color, color and border. Instead, we can use variables to define these colors and just reference them wherever we want them.

Using CSS Variables:

Syntax of Var()

The syntax of var() is as follows:

var(–name, value)

NOTE: The variable name must begin with two dashes (--).

:root {
  --blue: #1e90ff;
  --white: #ffffff;
}

body { background-color: var(--blue); }

h2 { border-bottom: 2px solid var(--blue); }

button {
  background-color: var(--white);
  color: var(--blue);
  border: 1px solid var(--blue);
  padding: 5px;
}

We have defined css variables with :root. This creates the variables with global scope.

Fallback values in CSS variables.

Fallback values are the second argument when defining the variable in CSS. These allows you to Fallback to the second argument if first one is unable to execute. The most common reasons for such event are:

Browser does not support CSS variable property.
The browser supports the property, and the variable is set to correct values with scope.
The browser supports the property, but the variable is not set to any value.
The browser supports the property, and the variable is set to an invalid value.

Syntax:

color: var(--color4, var(--color3));

The benefits of using CSS Variables:

Below are few of the benefits of using variables in CSS:

Variables saves time.
You define variables in one place, and if you need to change the value of that variable, you can do so in one place, which will automatically update changes to the places where they are used.
This provides improved readability. If you have fellow programmers, front-end developers working on the same file as you, it will be easier for them to know what the variable is doing.

Conclusion:

Variables in CSS save time, maintaining and updating. Sure, the first time will require some time for writing those values. But once defined, you can use them anywhere you want, and as many times as you want.