What is CSS Variable - in simple terms
Tags: css, javascript, beginners, webdev
Published: 2021-10-23 22:30:43

Hello everyone! 💙

In this article, I will write about CSS Variables, scoping CSS Variables, and how they can help you to create better, and more maintainable CSS. 

let's get started 💃

<hr>

**CSS Variables** are sometimes referred to as **CSS Custom properties** or **Cascading Variables.** They allow information to be maintained and referenced in many locations. They make it easy to read and understand code especially when the code was done by someone else. 

A good way to use CSS variables is when it comes to the colors of your design. Instead of copy and paste the same colors over and over again, you can place them in variables. 

<hr>

## **DEFINING VARIABLES**

Declaring a Variable is done using a Variable name that begins with a double hyphen (--), and a property value that can be any valid CSS value.  

**Example:** 


```
h1 {
--main-bg-color: #358597;
}
``` 


- CSS variables are case-sensitive: 

`--Main-Bg-Color` and `--main-bg-color` are not the same. To prevent this confusion, avoid using capital letters in variable names.

- Use hyphen delimited strings like this:

`--main-text-color` instead of `--maintextcolor` when defining a string.


## **USING CSS VARIABLES**

To use the CSS variables you must specify your CSS Variable name inside the `var()` function, in place of a regular property value. 

The `var()` function is used to insert the value of a CSS variable. 

The syntax of the var() function is as follows: 

`var(--name, value)` 

- The variable name (must start with two dashes)

- Value is Optional: The fallback value (used if the variable is not found) 

**Example 1:**  


```
h1 {

--main-text-color: white;

color: var( --main-text-color);

} 


``` 
 
**Example 1** contains the variable name alone.

**Example 2:**

```
h1 {

--main-text-color: white;

color: var( --main-text-color, red);

} 


``` 

**Example 2** contains the variable name and the fallback value(red). 

<hr>

### **SCOOPING VARIABLES**

 Scope determines the range of the accessibility of the variable. Scope helps to store separate values, which come into play only when they are necessary. 

**Variables have two types of scope:**

- Global Scope
- local Scope

#### **GLOBAL SCOPE** 

Global scope is declared in `:root` pseudo-class. Declaring the variable in `:root` enables the variable to be accessed/used through out the entire document or globally across the entire HTML document. 

**To declare a variable in the global scope, you:**

- Define the variable in a `:root{}` pseudo class

```
:root { 
--primary-color: #000;
--text-shadow: 2px 2px 1px white;
 }  
```
- Assign the variables to different child elements in your document

```
h1,h2 { 
color: var(--primary-color); 
text-shadow: var(--text-shadow);
}
```

Declaring a CSS variable on the `:root` pseudo-class and using it where needed throughout the document, will help you avoid repetition and it will be easier if you want to change the value across the entire page later.

 It is common practice to define variables inside the `:root` but not mandatory 

#### **LOCAL SCOPE**

**The local scope** would only affect the specific HTML element that it is declared in along with any children that the element may contain. 

To create a variable with local scope, declare it inside the selector that is going to use it.

Example:

```
h1 {
  --font-size: 18px;
  --line-height-h1: 1.6;
  font-size: var(--font-size);
  line-height: var(--line-height-h1);
}
```
 
Remember that **Global variables** can be accessed/used throughout the entire document, while **local variables** can be used only inside the selector where it is declared.

<hr>

### **HOISTING CSS VARIABLES**

Like in JavaScript, **CSS variables** can be hoisted. This means that CSS variables can be used before they are declared. 

**Example:**

```
body {
color: var(--font-color);
}

:root {
--font-color: orange;
}
```

As you can see in the above example, CSS variable `--font-color` was used before it was declared in the `:root` pseudo-selector, and the code works fine.

<hr>

### **OVERRIDING CSS VARIABLES**

You can override **CSS Variables** like every other CSS property. 

**Example:**


```
:root {
--btn-color: red;
}

button {
--btn-color: white;
color: var(--btn-color);
padding: 2em;
}
```



In the above example, the button text color will be white.

- I set the `--btn-color: red;` on the `:root` pseudo-class meaning I want my button text color to be red

- I wasn't okay with the red color for my button so I changed: 

`--btn-color: red;` to `--btn-color: white;` on the button selector meaning my button text color will be white instead of the red color I set on the `:root{}` pseudo class.


Overriding the CSS variable is cool, yeah? be careful not to overuse this as you are defeating the main purpose of CSS variables if you are going to be overriding them.

I will tell you to change the value from the `:root` pseudo-class or assign a different variable.

<hr>


### USE OF MULTIPLE VARIABLES

You are not limited to use a single var() in your declarations.

**Example**

```
:root {
--padding: 10px 20px;
}

div {
padding: var(--padding);
}
```
<hr>

### **DECLARING A VARIABLE WITHIN A VARIABLE**

You can also declare a variable within another variable.

```
:root {
--background-color: orange;
--border: 1px solid var(--background-color);
}

button {
border: var(--border);
}
```
<hr>

### **FALLBACK VALUES**

**Fallback values** are used if the variable value given as the first argument isn't defined or has an invalid value.
 
**Example 1:** 

```
body {
background-color: var(--main-background-color, green);
}
```
If `--main--background-color` is not defined or declared, the color of the background will be green. 


**Example 2:**
```
h1 {
color: var(--main-text-color, var(--text-color, green));
}
```
**Notice any difference between Example 1 and Example 2 ?** 

**Example 2** have more than one fallback value. In **Example 2:**

- `--text-color` is the fallback value for `--main-text-color`, `green` is the fallback value for `--text-color`

- Color will be green  if `--main-text-color` and `--text-color` are not defined 

I hope you understand?
 
**Fallback values** only accept two parameters, everything following the first comma is the second parameter. If the first parameter is provided the fallback will fail.

<hr>


### **ADVANTAGES OF USING CSS VARIABLES** 

- Makes the code easier to read(understandable).
- Makes it much easier to change the color values.
- CSS variables can be declared anywhere, it is flexible.
- CSS variables help remove redundancy In code.

<hr>

## **CONCLUSION**

The ability to maintain and reference information in more than one location is a huge benefit of CSS variables. This allows us to easily update information and not have to go into every place we used that information. They also make it easier to read and understand code and they make it easier to work with other developers on a project.

If you have any questions about **CSS variables**, you can leave them in the comment section below and I'll be happy to answer every single one.

If you found this article helpful, please like and share it 💙.

That's all for today! 😁 You reached the end of the article 😍.