CSS Variables can store a custom property as a value.
There are 2 steps in which variables are used –
- Setting a custom property using the variable name. The variable name always starts with 2 hyphens and can store a CSS custom property. You must define the scope of the variable. For example, you can define this variable at the root level i.e. :root or body selector i.e body or universal selector i.e * or any other selector –
2. The variable name can be passed as an argument to the var() function. As the var() function stores a value so you can assign this value to a CSS property or a group of properties like –
The Syntax of var() function:
The fallback-value is optional. We will see one example of this before the end of this page.
so the above 2 steps are equivalent to –
Now, the advantage of using the variable is that you can insert this value anywhere in the code depending on where you want to set this custom border property.
Let us take some examples of CSS Variables –
Single Variable in the document
Let us take a basic example where we will use a single variable which will contain a custom property and we will use the same variable everywhere.
Example of CSS Variables Single Property
Multiple Variables in the document
There is no limitation on the number of variables in the document. You can define either 1 variable or multiple variables depending upon your need and requirement.
Example of Multiple Variables
CSS Variables Fallback
Ideally, you should always define a fallback value.
Consider few scenarios like –
- You are using a variable as arguments of the var() function but you did not define it
- Another situation is like – you misspelled the name of the variable in the argument
In both these scenarios, you will run into issues as the variable will not store any custom property so the fix to this problem is a fallback value. This fallback value will be applicable only when the browser is not able to decide the value of the variable.
Example of Variable Fallback
Scope of the Variable
The scope of the variable is important.
If you wish to use the variable anywhere in the document, then define it at the root level.
If you want to use the variable anywhere in the body, then define it under it
If the same variable name is defined at the root level as well as in a particular tag level, then what is the priority?
The variable which is defined at the lower tag level will have a higher priority than the same variable name which is defined at root level or body selector or html selector or universal selector.
Similarly, if you define the same variable name inside the root level (:root), body selector(body), universal selector (*), the html document (html) or at any lower tag/id level, then the order of priority is as follows –
- The id/class or lower tag selectors have highest priority compared to the below selectors
- Universal selector (*) – Higher priority than the body selector but lower priority than the lower tag/id/class selectors
- Body selector(body) – Lower priority than Universal selector but higher priority than the root level (:root) selector
- root level (:root) selector – Lower priority than body selector (body) but higher priority than the html (html) selector
- html document (html) selector – It has lower priority than these above selectors
Example to show the scope of the variable
Scope of variable inside id or class
Sometimes we use the same name of the variable inside an id selector as well as class selector.
In this case, the custom property of id selector will have higher priority than the class selector.
Refer the example below –