CSS Variables: Understanding the Var() function and how to use it.

Let's pretend you have one hundred lines of code in your CSS stylesheet. In the long run, you remember that the H1and p text color (black) is the same which distorts the color scheme of your project__ the texts are dimmed and unreadable.

You would need to scroll up to change either the H1 or P text-color value. Instead of skimming the lines to effect the change, you can use CSS Variables to change the values.

A variable is a unit/name that stores a value and could be reused throughout the CSS stylesheet.

Variables(also known as custom properties)are defined by a developer for ease, and to avoid repetition Of values and usage on elements.

How to declare a Variable

Variable accepts a unique name. It's important to give it a name you will remember.

Variable declarations must begin with:

• Two dashes(--)
• A custom property name,
• A custom property value,

Example

--color-name:#1b1b22;

In the above code, the --color-name is the custom property name, while the #1b1b22 is the value.

What is a Var() function

A Var() function retrieves the value of the variable name and applies the value to whatever property you use it on. Var() function is declared with a parenthesis, followed by the custom property name.
Syntax

Background-color: var(--color-name);

The Var() function will collect the variable name’s value to style the Background-color for the given element.

In this case, the Var() is looking for a value to paint the element’s background.

Here is an example

Html

<h1>I accept variable to change  my color</h1>

CSS

/* variable name: the --color-name */
    text-align: center;
    --color-name:red;


    /* use the --color-name as the h1 text color*/
    color: var(--color-name);

Result

In the above code, the h1 text color value is red; the Var() retrieves the value from the --color-name __ the variable name __ property.

The Var() function arguments

The Var() function accepts two arguments. The first argument’s value is for the element you want to style, and the second argument stands for the fallback value.

Var() with no fallback value

background-color: var(--body-color);

The --body-color is the first argument’s value. No fallback value is supplied.

Var() with a fallback value

background-color: var(--body-color, orange);

The --body-color is the first argument value; Orange is the fallback value.

Note the following:

1. Fallback is used when the browser couldn’t load the first argument value, or the value is invalid
2. Fallback is optional.
3. Use the comma to separate the first and second arguments.
4. You can also use the Var()function as the fallback value argument. To do that, use a comma to separate the var() function declaration.

Here is an example

background-color: var(--color-name),  var(--color-name);

The background-color has a Var() function as the fallback value.

Type of variable scope

1. Local variable scope
2. Global variable scope

Local variable scope

The local scope variable is described in the element’s selector in the style sheet. All the above examples are locally scoped, and the variables could be used only for the nodes of the element.

For example:

aside{
    --style-color1:#1b1b22;
}

From the above code, the –-style-color1 is locally scoped to the document’s <aside> elements, which means the variable is limited to the <aside> elements.

The advantage of using a local scope variable is that it overrides the global variable.

This means if you have two custom properties with similar names but different values, the browser will ignore the global custom property name and use the locally scoped one.

Example

root{
--main-color:blue;
}

p{
    --main-color:brown;
    color: var(--main-color);
}

In the above code, the -–main-color with the value of brown will override the global variable in the root selector for the

element.

However, there is another way to style all your elements with one variable’s value.

Global variable scope

The global scope is distinct because you are to declare it in the:root selector at the top of your stylesheet.

The global variable in the: root selector is the apex level in CSS.

When your variables are there, you can style all the selected elements, and change the variables values. Any changes you made to a value will affect the element.

Follow the steps below to create a global variable at the top of your stylesheet.

1. Type a colon sign, or, simply put :
2. Write these four letters: root
3. Close it with the curly braces sign i.e {}

Here is an example

:root{

}

You have set the global variable scope that awaits the variable name plus its value to style your elements.

To round up this tutorial, Let’s create 4 boxes to practice global variable scope.

Open your html document to create the boxes, like this.
Html

<section>
       <div class="box1">box 3</div>
       <div class="box2">box 2</div>
       <div class="box3">Box 3</div>
       <div class="box4">Box 4</div>


   </section>

CSS
Create a container

section{
    display: flex;
    flex-direction:row;
    justify-content: space-between;
    background-color: black;
    margin: 2px;
    padding: 10px;
}

Next, the boxes for the container

.box1{
    width: 250px;
    height: 250px;
    border-radius: 10px;


}
.box2{

    width: 250px;
    height: 250px;
    border-radius:  10px;

}
.box3{

    width: 250px;
    height: 250px;
    border-radius: 10px;
}
.box4{

    width: 250px;
    height: 250px;
    border-radius: 10px;

}

When you preview the code with your live server, the browser is supposed to show the image below.

Result

Now, scroll to the top of your style sheet to set the global variable scope.

:root{
    /* insert  your custom property names and values
   */
}

Inside the:root selector, add these custom property names and values.

   --box-color1:#24242a;
   --box-color2:#454533;
   --box-color3:#fff444;
   --box-color4:#30204a;

Style each of the boxes' background-color with the above custom properties.

Like this:

Box 1

  background-color: var(--box-color1);

Box 2

  background-color: var(--box-color2);

Box 3

background-color: var(--box-color3);

Box 4

background-color: var(--box-color4);

Result

The browser should display the above image when you reload it. If you don’t get the same result, check the code again and preview it.
You may play with the box colors by changing the custom property names in the Var() declaration.

Important of CSS Variable:

1. CSS variable is case-sensitive i.e. --new-color is not the same as --New-color for the custom property name.
2. DRY: Instead of repeating a value, say, #1b1b22, use CSS Variables to save your time.
3. Variable value is easy to comprehend. For example, --window-color is clearer than #773fff.
4. DRY means “Don’t repeat yourself.”

Conclusion
In this tutorial, You have known what CSS variable means, the two types of variable scope, the var() function, and its arguments. I hope you learn something new today from this article. Feel free to drop your comment.

Also, you can connect with me on Twitter.
Here