A variable gives us the ability to store a value inside it and then reuse it throughout the code. CSS variables make our work easier and more manageable.
Imagine you have a large project and you have to make changes to the fonts and colors. Now, one common way to do that is by changing them all manually and individually. But this is a nightmare and there are chances that you might miss something.
But with the use of CSS variables, you can do it with a few keystrokes. You just have to change the value of the variable where you have defined it and that’s it. So you see that this is where CSS variables come in handy. And CSS variables can be accessed and modified in JavaScript.
Syntax of CSS variables
.root {
--primary-color: #151515;
}
- A CSS variable is defined by adding double hyphens before your property name that follows the property name.
- The property name could be anything. You can name it whatever you want, but try giving them a reasonable name.
- After that, you give value to that. CSS variables are case sensitive so be careful while declaring and using one.
To use a CSS variable we use a function called var(). This function recalls the value of the variable and returns it.
Use of the variable:
.title {
color: var(--primary-color);
}
The above code will set the value of .title class selector’s color to #151515.
Scopes of CSS variables :
CSS variables have two scopes
- Global
- Local
Global scope :
A variable is said to be in global scope if it is defined in the highest level possible. For that, we use the : root selector for declaring the variables.
:root {
--text-font-family: sans-serif;
}
A global scope variable can be accessed anywhere in the code. And you can also modify it.
Local scope :
We can restrict the use of CSS variables to a specific element by declaring in a low-level selector.For example, using it for a specific class.
.container {
--main-color:#151515;
}
.container .heading {
color: var(--main-color);
}
Now this variable can only be used by .container selector or its child elements, And all the elements inside .container will initially inherit this property, but elements outside of .container cannot use it.
Overriding CSS variables :
CSS variables can be overridden. If in any part of your code you want to change the value of the variable you can do that.
This is possible by accessing the variable in the local scope and giving it another value.
:root {
--text-color red;
}
header {
--text-color: green;
color: var(--text-color); /*color: green*/
}
footer {
--text-color: blue;
color: var(--text-color); /*color: blue; */
}
Now, overriding only works for the element that it is overridden in.
And all the elements inside header and footer tags will get the new property value.
