CSS: Variable (Custom Property)

What is CSS Custom Property

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.

Example

/* declare several variables, valid at root node and all its children */
:root {
 --xx: pink;
 --yy: 30px;
 --zz: solid thin red;
}

/* using the variables */
.x {
 color: var(--xx);
 font-size: var(--yy);
 border: var(--zz);
 margin: 16px;
}

🛑 WARNING: There must be no space after var.

Variable Chaining

Values can be a variable declared previously.

:root {
 --x-col: pink;
 --x-pane-border: solid 3px var(--x-col);
}

Browser Support

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