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-coloris a variable name
rebeccapurpleis the value of variable
Remeber, the variable name is case-sensitive which means
--text-Color are two different variables.
You can declare a variable globally inside
:root selector or any other valid selector as follows
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
To consume the value of the CSS variable we have to use
var() function as follows
Let’s consume the value defined inside the
--text-color variable in
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
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
Let’s see how we can update the value of CSS variables on runtime.
First, we get handle of document element
Next, we can update the desired property by setting it to new value as follows
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