How to use CSS custom variables and properties?

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.

Declaring a CSS variable

A CSS variables can be declared using -- double hyphen

--text-color: rebeccapurple;

where

• --text-color is a variable name
• rebeccapurple 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.

Consuming a CSS Variable

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

• margins
• borders
• box-shadows
• gradients
• colors and background colors
• fonts and font sizes
• site theme colors i.e. light and dark theme
• dynamically calculated values
• make elements responsive by overriding variables in media queries

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.

Fallback values

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)));

Updating CSS variable using JavaScript

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.

Example

A working demo of code discussed above

Browser support

CSS variables is widely supported by all major browsers. Only the IE browser need a fallback mechanism - below is screenshot from caniuse

Summary

• Declare CSS variables using a double hyphen --
• CSS variables are case sensitive
• Consume CSS variables using var() function
• CSS variables have a cascading effect
• Multiple fallback values can be provided by separating them with a comma.
• Value of CSS variables can be changed dynamically using JavaScript.