CSS Variable

By Xah Lee. Date: . Last updated: .

CSS allows you you use variable. This is called CSS custom property.

Declare variable like a property, but with the property name with prefix of 2 hyphens, like this:

--xx: red

Then, use it like this:

color: var(--xx)

Here is example.

something
<div class="xyz">something</div>
:root {
 --xx: pink;
 --yy: 2rem;
 --zz: solid thin red;
}

div.xyz
{
color: var(--xx);
font-size: var(--yy);
border: var(--zz);
}

The :root means root of the HTML or XML. You can also use html, but :root is better because in XML (example: SVG), the root is not html.

There must be no space after var.

Technically, CSS variable is called a CSS custom property. You should think of it as custom property, because, it is used just like properties, with the same cascading precedence for their scope, and overwriting a value is also the same as CSS cascade.

Browser Support

CSS custom property is supported by all major browsers since 2017 Jan, except Internet Explorer.


CSS

Basics

Selectors

Color

Font

Text Decoration

Box Model

Box Decoration

Layout

Layers

Transform/Animation

Line Wrap

Misc