Variables in CSS

CSS | Variables: In this tutorial, we are going to learn about the variables in CSS, how to create variables, how to use them etc.
Submitted by Anjali Singh, on December 10, 2019

CSS | Variables

CSS variables allow you to create reusable values that can be used throughout a CSS document.

In CSS variable, function var() allows CSS variables to be accessed.

For example, in CSS it's quite common to reuse a single color or text-size throughout the code, this would mean reusing the same color or text-size value several times throughout a document. With CSS variables the color or text-size value can be assigned to a variable and used in multiple places. This makes changing values easier and is more convenient than using traditional CSS values.

Note: Variables should be declared in a CSS selector that defines variables scope. In the global scope, you can use either the: root or the body selector.

The name of the variable must start with two dashes (--), also the name of the variable is case sensitive.

CSS variables | Valids/Invalids

When naming CSS variables, it contains only letters and dashes just like other CSS properties but it should start with double dashes (--).

    //These are Invalids variable names 
    --123color: blue; 
    --#color: red;
    --$width: 100px; 
    //Valid variable names
    --color: red;
    --bg-color: yellow ;
    --width: 100px;

Variable properties

Variable color
Variable dimension
Variable cascading

Let's look at each property more closely...

a) Variable color

This property allows us to reuse a single color throughout the code. CSS Variables the color value can be assigned to a variable and used in multiple places.

Syntax:

Element {
    --main-bg-color: coral;
}

Example:

<!DOCTYPE html>
<html>

<head>
    <style>
        :root {
            --primary-color: blue;
        }
        
        #div1 {
            background-color: var(--primary-color);
            padding: 5px;
        }
        
        #div2 {
            background-color: var(--primary-color);
            padding: 10px;
        }
        
        #div3 {
            background-color: var(--primary-color);
            padding: 15px;
        }
    </style>
</head>

<body>
    <div id="div1"> Variables in CSS.</div>
    <br>

    <div id="div2">Variables in CSS.</div>
    <br>
    <div id="div3">Variables in CSS.</div>
</body>

</html>

Output

In the above example, we have reused blue color in three division element.

b) Variable dimensions

This property allows us to reuse a few sets of dimensions throughout the code.

Syntax:

Element {
    --W200: 200px;
    --W10: 10px;
}

Example:

<!DOCTYPE html>
<html>

<head>
    <style>
        :root {
            --W200: 200px;
            --W10: 10px;
        }
        
        #div1 {
            width: var(--W200);
            margin: var(--W10);
            padding: 5px;
        }
        
        #div2 {
            width: var(--W200);
            margin: var(--W10);
            padding: 10px;
        }
    </style>
</head>

<body>
    <div id="div1">Variables in CSS.</div>
    <br>
    <div id="div2">Variables in CSS.</div>
    <br>

</body>

</html>

Output

In the above example, the same dimensions are used in both the divisions.

c) Variable cascading

Variables in CSS cascade in the same way as other properties, and can be reused safely.

You can define variables multiple times and only the definition with the highest specificity will apply to the element selected.

Syntax:

Element {
    --color: green;
    border: 1px solid var(--color);
}

Example:

<!DOCTYPE html>

<html>

<head>
    <style>
        .button {
            --color: green;
            border: 1px solid var(--color);
            color: var(--color);
        }
        
        .button:hover {
            --color: blue;
        }
        
        .button_red {
            --color: red;
        }
    </style>
</head>

<body>
    <a class="button">Button Green</a>
    <a class="button button_red">Button Red</a>
    <a class="button">Button Hovered On</a>
</body>

</html>

Output

In the above example, if we hover over the last button the color changes to blue.