Variables in CSS

CSS variables are user-defined variables that can store any CSS values like numbers, strings, or color. It helps in maintaining consistency throughout the entire webpage. In this tutorial, we are going to learn the Basics of CSS Variable with various Examples.

CSS variables are used to store a value that can be used frequently in the HTML document.

The benefit of using CSS variables is that we can use the same variable in multiple places in the document. We can also change the value of the variable in one place and it will be reflected in all the places where the variable is used.

Set Variables

The variables are defined by a name preceded by a double dash (--) and a value is assigned to the variable after a colon. Example: --nav-color: red

:root {
    --nav-color: red;
    --link-color: white;
}

In the above example, we have defined 2 variable names --nav-color and --link-color.

Access Variables

A CSS variable can be accessed using the var() function.

You need to pass the variable name as an argument to the var() function and it will return the value of the variable.

Here is an example of accessing a variable.

/* using variable inside a selector */
a {
    color: var(--link-color);
}

Here is a working example of CSS variable.

:root {
  --my-color: red;
}

.para {
  color: var(--my-color);
}

CSS variable scope

Any variable that we define in CSS has a scope value. Beyond a variable's scope is not accessible.

You just can not define variables anywhere in their document. Based on its use you can define it in three scopes:

1. Global scope
2. Local scope
3. Block scope

1. Global scope

Global variables are the variables that can be accessed anywhere in the linked document.

These are defined inside :root selector. The :root selector is a pseudo-class selector that matches the root element of the document.

/* global variable */
:root {
  --my-background: orange;
  --my-padding: 15px;
  --my-border: #ccc 2px solid;
}

.box {
  background-color: var(--my-background);
  padding: var(--my-padding);
}

p {
  padding: var(--my-padding);
  border: var(--my-border);
}

2. Local scope

Any variable that is defined inside a selector is called a local variable because it is only accessible inside that selector and its child selectors (if any).

.box {
    --my-background: orange;
    --my-padding: 15px;
    --my-margin: 10px;
    background-color: var(--my-background);
    padding: var(--my-padding);
    margin: var(--my-margin);
}

3. Block scope

Mostly you will only work with global and local variables. But it's good to know about block scope variables of CSS.

Block scope variables are those variables that are defined inside a block. These variables are only accessible inside that block.

These are commonly used in @media queries and @keyframes rules.

@media (max-width: 600px) {
  .box {
    --my-background: red;
  }
}

.box {
  background-color: var(--my-background);
}

You can see that the --my-background variable is set for the .box selector and it will only be accessible for device width less than 600px.

CSS variable inheritance

When you define a variable inside a selector, the variable is accessible inside that selector and its child elements.

Let's see the following example to understand how CSS variable inheritance work.

.box{
    --my-border: #ccc 2px solid;
    --my-padding: 15px;

    border: var(--my-border);
    padding: var(--my-padding);
}

.box p {
    border: var(--my-border);
    padding: var(--my-padding);
}

CSS variable overriding

When you define a variable inside a selector, the variable is accessible inside that selector and its child elements. If you define a variable with the same name inside a child element, the variable will be overridden.

Overriding is the process of changing the value of a variable. It does not cause any error just the value of the variable is changed.

Let's look at the following example to understand how CSS variable overriding works.

:root {
    --my-border: #ccc 2px solid;
    --my-padding: 15px;
}

div {
    border: var(--my-border);
    padding: var(--my-padding);
}

p {
    --my-border: red 2px solid;
    --my-padding: 10px;

    border: var(--my-border);
    padding: var(--my-padding);
}