CSS Variables: Understanding the Var() function and how to use it.
Tags: webdev, tutorial, css, html
Published: 2023-08-08 19:13:52


Let's pretend you have one hundred lines of code in your CSS stylesheet. In the long run, you remember that the `H1`and `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

![first image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0t7belixjzuq93k08fj2.png)

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 <p> 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


![blank image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wwlth28mfahz9q1k5ftu.png)

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

![Last Image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/j38rapar5b7uxmsvv2bk.png)

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](https://twitter.com/bornonTuesday2?t=kS2qDpyerrXyG0NfDgRJEQ&s=09)