Variables in general are means of storing value and retrieving it later. They help in avoiding duplicating the same code again and again and make code more maintainable.
Earlier in CSS, there was no way of defining variables. If we have to use the same color, we need to repeat the color code where ever required. Similarly, if we have to use 10px
as a standard margin, we have to hardcode it everywhere. Updating this data everywhere can be difficult and error-prone.
To solve these problems variable support was added in CSS.
Let’s see how it works.
A CSS variables can be declared using --
double hyphen
--text-color: rebeccapurple;
where
--text-color
is a variable namerebeccapurple
is the value of variable --text-color
Remeber, the variable name is case-sensitive which means --text-color
and --text-Color
are two different variables.
You can declare a variable globally inside :root
selector or any other valid selector as follows
:root { --text-color: rebeccapurple; } header { --text-color: mediumpurple; }
CSS variables also have cascading nature i.e. if the variable is not found in the current scope, the browser looks for it in parent element again if it is not found in the parent element, it keeps looking till it reaches root element.
Also, the value of --text-color
defined inside the header
element overrides the value defined inside the :root
element.
To consume the value of the CSS variable we have to use var()
function as follows
color: var(--text-color);
Let’s consume the value defined inside the --text-color
variable in header
:root { --text-color: rebeccapurple; } header { --text-color: mediumpurple; color: var(--text-color); }
The header
element gets the color value of mediumpurple
as it overrides the --text-color
variable in the current scope.
As you can see the possibilities are endless. You can create variables for
Whatever you see in code that is repeated even once can be converted into a variable so that its easy to maintain and change that value in the future.
CSS variables also allow us to define multiple fallback values when the given variable is not yet defined. Let’s understand this with example
:root { --text-color: rebeccapurple; } header { --text-color: mediumpurple; color: var(--text-color); background: var( --gradient, linear-gradient(to right, #8900b7 0%, #f3430d 100%) ; ); }
As we can see in the above example the variable --gradient
is neither defined in current scope nor defined in global :root
element. In this case, the browser will fall back to second values separated by a comma i.e. linear-gradient(to right,#8900b7 0%,#f3430d 100%
. It is even possible to define multiple fallback values separated by a comma as follows
background: var(--gradient, var(--fallback1, var(--fallback2, pink)));
Let’s see how we can update the value of CSS variables on runtime.
First, we get handle of document element
const header = document.querySelector('header')
Next, we can update the desired property by setting it to new value as follows
header.style.setProperty('--text-color', 'white')
Again, if we update the variable defined inside the :root
element, the change gets reflected everywhere the variable is used.
A working demo of code discussed above
CSS variables is widely supported by all major browsers. Only the IE
browser need a fallback mechanism - below is screenshot from caniuse
--
var()
function