What is a CSS variable and How it works?

CSS custom properties, also known as CSS Variables, allow authors to create reusable values throughout a CSS document. Their primary purpose is to avoid repeating the same value many times, such as a single color used throughout a document. By assigning a value to a variable and referencing it in multiple places, changing values becomes easier and more semantic. Some prefer the term “custom properties” over “variables” to emphasize that they are different in nature and far more versatile than variables found in CSS preprocessors like Sass or Less.

To define a custom property, you declare it much like any other CSS property. A custom property always begins with two dashes (–). The syntax follows the standard CSS structure: a property name followed by a colon and then a value, terminated by a semicolon. So, the structure is –custom-name: value;.

Any rule can store custom properties. A common place to store them is within the :root pseudo-class, which stores the custom property in the document root.

Defining a CSS variable:

declare it within a selector’s declaration block. Using :root makes it globally available:

:root {
    --MainFont: 'Helvetica Neue', Helvetica, Arial, sans-serif; /* Defines a custom property named --MainFont */
--brand-color: #369; /* Defines a custom property for a brand color */
}

This example defines a custom property named –MainFont and assigns it a value representing a font stack.

How does var() work in CSS?

To use the value defined in a custom property, you include the custom property name inside the var() function. You use this var() function as the value for a standard CSS property.

.Title {
    font-family: var(--MainFont); /* Uses the value stored in --MainFont */
}
p {
    color: var(--brand-color); /* Uses the value stored in --brand-color */
}

In this example, the value of the –MainFont custom property determines the font-family property for elements with the class title.

Benefits of Using var():

The primary advantage is that if you change the value assigned to the custom property (e.g., change the color hex code for –brand-color) in one central location (like :root), every rule that uses var(–brand-color) will automatically update to the new value without requiring direct modification. This method makes changing values easier and more semantic than repeating the same value multiple times.

Fallback Values

The var() function also supports a second argument, which serves as a fallback value. If the specified custom property is not defined or is invalid, the browser will use this fallback value instead.

Example:

p {
    color: var(--secondary-color, blue); /* Uses --secondary-color if defined, otherwise uses blue */
}

In this case, if –secondary-color is not defined, the paragraph text will be blue.

Invalid Values

If a var() function evaluates to a value that is invalid for the CSS property it’s applied to (e.g., using a color variable as a padding value), the property will be set to its initial value.

Dynamic Changes and Media Queries

Custom properties, accessed via var(), can be changed dynamically, for instance, using JavaScript to toggle values for features like a light/dark mode. They can also be redefined within media queries, allowing you to change variable values based on screen size and have those changes cascade wherever the variable is used, which is different from preprocessor variables.

It’s noting that while the standard syntax for using custom properties is var(–name), some older proposals for CSS variables used different syntax like @variables with var(name) (without the –) or @define with backticks (exampleColor). The currently supported and widely adopted standard uses the — prefix for custom property names and the var() function to reference them.

Custom properties can update “on the fly”, making them useful in dynamic scenarios and easily readable and writable from script, which elevates them far beyond what was possible with preprocessor variables. An example scenario mentioned is using JavaScript to toggle the value of custom properties like –background and –foreground for a simple light/dark mode toggle button.

At the time some of the sources were written, support for custom properties had rolled out in all major browsers except IE. We recommended checking resources like “Can I Use” for up-to-date support information. The @supports at-rule allows encapsulating code that pertains to the latest features, which can be used with custom properties.

CSS3 Topics