What are CSS Variables?
CSS variables are custom properties in which we can store a value and use it anywhere in the HTML code. CSS variables need to be specifically defined whether they are being initialized or substituted.
The syntax of CSS variable is :
–variable
$variable
The initialization of the CSS variable is done by prefixing “–” to the variable name.
Example:-The following syntax initializes the variable “my_font” to 20px.
–my_font: 20px;
The “my_font” variable can now be used anywhere inside the code with a value of “20px”. Next comes the substitution part. The substitution of a property to the variable can be done only by the “var()” CSS property. Inside the “var(),” we spell the variable name as shown below:
selector {
font-size : var(–my_font);
}
In the above syntax, the font size of the selector will become 20px due to the my_font variable. The “var()” takes another argument apart from the variable name – the fallback value. The fallback value works as a safety net in the variable substitution. In scenarios where the variable value is found to be inaccessible, the fallback value will be used in its place.
The fallback value can be declared as shown below:
font-size: var(–my_font, 20px);
Scope In CSS Variables
In the implementation shown earlier, the root pseudo-class in which the variable is declared and its significance in the CSS sheet look a bit questionable. However, this class is a part of “scopes,” and this section will highlight its importance in variables in CSS.
Global Scope – One declaration For All
The scope property is akin to a variable’s scope in programming languages. The CSS variable’s scope is no different. This is how you can define a CSS variable under two scopes:
- Global Scope – Accepted from the start till the end of the document
- Local Scope – Accepted only within the selector
When a variable is defined with a global scope, its existence is defined in the complete document from the time of its declaration. But other programming languages like Python or C++ have an open field between functions where you have the option to define the global scope.
Unfortunately, CSS has no such area due to the lack of a preprocessor. Therefore, in CSS, we use the root pseudo-class, which means that the variable is under the document’s root i.e. global.
: root {
–my_variable: <value>
}
This variable can now be called in any of the selectors in the same document.
:root {
–my_variable: <value>;
}
div {
<property>: var(–my_variable, fallback)
}
The root selector works because variables in CSS can access the DOM of the web app code. The root here represents the root of the DOM tree which passes the data to its branches (i.e., complete document).
Local Scope – Bounded By Selector Walls
The local scope of the variables in CSS is restricted by the boundaries of the selectors inside which it has been defined. For instance, in the below code, I have defined the background color for a div box with id “first_div”:
div {
width: 300px;
height: 200px;
color: white;
font-weight: bold;
font-size: 30px;
}
#first_div {
–my_bg: #692a3c;
background-color: var(–my_bg, black);
}
<body>
<center>
<div id = “first_div”>I am a div</div>
</center>
</body>
Fallback Values In CSS Variables
Fallback values are the second argument used in the “var()” function, which denotes the substitution of a CSS variable. Fallback values take their name from the job they do – they are used when you fall back with the original variable values.
There are four possibilities through which a CSS variable goes during the substitution.
- Browser does not support CSS variable property.
- The browser supports the property, and the variable is set to correct values with scope.
- The browser supports the property, but the variable is not set to any value.
- The browser supports the property, and the variable is set to an invalid value.
CSS Variables Are Case-Sensitive
The CSS variables are case-sensitive. Therefore, the variables my_var and My_var are both different.
CSS Variable Cannot Be A Property Name
The CSS variable name cannot have a value as an existing property in CSS. So, for example, you cannot initialize a variable with the value “font-size.”
Advantages of using var() are:
- makes the code easier to read (more understandable)
- makes it much easier to change the color values
