• Office Hours:

    10:00 AM to 5:00 PM IST

  • Call:

    +919986158351

  • Mail Us

CSS Variables

CSS Variables are entities defined by the developer to hold specific values, to be reused throughout the CSS.
They are set using custom property notation “–” ( e.g., –main-bg-color: Red;), and can be accessed using the var() function (e.g., background-color: var(–main-bg-color)).

Need of CSS variables

Complex websites can have big CSS files with thousands of lines of code, some of them repeated multiple times. E.g. same background color and text color used in many places. In case you want to change the text color on the website, you will have to search each line within the CSS file and replace it with a different value. However, that is not the case with CSS variables as all one needs to do is to change the variable value to make the necessary modifications on the website.

Basic Example

Consider a CSS that applies same color to many classes:

.class1 {
	background-color: red;
}

.class2 {
	background-color: red;
}

.class3 {
	background-color: red;
}

.class4 {
	background-color: red;
}

.class5 {
	background-color: blue;
}

In this example you can notice that same “background-color: red;” is repeated in many classes. If you want to set the “background-color: green;” you have to change in each class. Now consider having the same problem in a CSS file with thousands of lines of code having hundreds of repeated lines, this can be solved by using CSS variable. We can declare the bg-color: green higher in cascade and let the CSS inheritance solve this problem.

Now lets have see the same code with CSS variables.

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

.class1 {
	background-color: var(--bg-color);
}

.class2 {
	background-color: var(--bg-color);
}

.class3 {
	background-color: var(--bg-color);
}

.class4 {
	background-color: var(--bg-color);
}

.class5 {
	background-color: blue;
}

Now if we want to change the background-color to green all we have to do is set bg-color: green in root

:root {
	--bg-color:  green;
}

This will make the background green in all the required classes.

We can also use value of CSS variable to set value of another CSS variable
E.g.
–color-1: blue;
–color-2: green;
–bg-gradient: linear-gradient(var(–color1), var(–color-2));

CSS variables Fallback
We can define multiple fallback values in var()
E.g. var(–color-1, pink) 
In this case, color pink will be applied if color-1 is not defined

CSS variables are case sensitive and cascading in nature
CSS variables are Case sensitive i.e. var(–Color: red) and var(–color: red) are not same

CSS variables cascade just like any other CSS property
E.g

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

All elements in root i.e. inside <html></html> elements where we applied –bg-color will inherit the color red

If we change the value of –bg-color in some other element then, its respective child elements will inherit the new value.
E.g.

:root {
      --bg-color: red;
}
 
.primary {
	--bg-color: blue;
}

p {
	color: var(--bg-color); 
}

HTML Code

<div>
  <p>This Paragraph will have red text</p>
  <div class="primary">
    <p>This Paragraph will have blue text</p>
  </div>
</div>

In this example the first <p>tag inherits the value of –bg-color from root i.e red, But the <p> tag inside the class .primary will inherit the value of –bg-color from its parent element i.e. blue.

CSS variables with JavaScript
We can use CSS variables with JavaScript just like any other properties of CSS.

E.g.

CSS Code

.main {
	--pos: 16px;
}

JavaScript Code

// Get the Value for target
const mainElement = document.querySelector('.main');

// Get pos value from mainElement
const posValue = getComputedStyle(mainElement).getPropertyValue('--pos');

// log pos value
console.log(posValue);

Browser Support for CSS variables
Click here to see Browser Support for CSS variables

Leave a comment

Your email address will not be published. Required fields are marked *