CSS Variables

Subscribe to my newsletter and never miss my upcoming articles

In programming, variables are used to store information to be referenced and later manipulated in a computer program. They also provide a way of labeling data with a descriptive name. When it comes to web development, CSS also has variable implementations, which we are about to cover. Sometimes we may want to use a certain colour as the main (dominant) one in our webpages. Or perhaps, the main font face name is very long that we can’t keep it in our minds. Well, we actually do not need to keep them in our heads. We just need to store them once, in a variable, and refer to them whenever we need to. Let’s see how to do this in CSS.

Using the :root Method

The :root CSS pseudo-class matches the root element of a tree representing the document. In HTML, :root represents the <html> element and is identical to the selector html, except that its specificity is higher - ( MDN ). This means on the :root, any properties used will affect all of its child elements. So, when we define a variable on the :root, it becomes global and hence can be accessed by all elements in the document.

:root {
   --[variable_name]: [value_to_store];
}

where --[variable_name] is how you intend to call the variable, and the [value_to_store] is any valid CSS property value.

Example:

:root {
   --dominant-color: #4fd94a;
   --main-font: "CRMFontCo: Rennie Mackintosh Allan Glen's";
}

So, we have two variables declared, --dominant-color, and --main-font; we can use these variables on every element. Now, in order to use them in our project, this is the syntax we use:

[element] {
   [property] : var( [variable_name] );
}

Where [element] is any valid element selector, [property] is any valid CSS property, and [variable_name] is the name of the variable which stores the value that corresponds to the said property. For instance, you can’t use the variable declared as --dominant-color which stores a color, for the text-align property.

Example:

div.banner {
   color: white;
   background-color: var(--dominant-color);
}

div.banner > p{
   font-family: var(--main-font);
}

Variables for individual elements

What if we want to declare a value for only a group of elements say only <div> elements, or elements with .class-name class? Over here, we can implement this by replacing :root with div then define the variables.

Full Example:

/* colour variable for only div elements */
div {
   --bg-color: blue;
}

/* sets background to blue */
div {
   height: 100px;
   width: 150px;
   background-color: var(--bg-color);
}

/* variable has no effect on the text color of the span element */
span {
   display: block;
   height: 100px;
   width: 150px;
   color: var(--bg-color);
}
  • Explanation: In the above code, we defined a variable --bg-color on the div element with a colour blue. Later we called the variable on a div element - the background is set to the value i.e blue. Then we tried setting the color property of a span element to the value of the --bg-color by calling it - it didn't work.

  • End Note: When variables are defined on elements or classes, those variables can only be used on elements with the same <tagName> or .class-name respectively. That is why our --bg-color variable didn't have any effects on the span element.

Comments (1)

Rajasekar S's photo

Good information. Please mention the CSS version details which supports variables