See also:
Quaject
Articles
Topics
How-tos
CSS code with custom properties

CSS variables

Anton Vasetenkov
Web, data, bio, language.
CSS

CSS variables, also known as CSS custom properties, are assigned reusable values such as colors, widths, font families, z-indices, and so on. The notation is as follows:

.article-section {
    --main-font-color: #303030;
}

.article-section .article-heading {
    color: var(--main-font-color);
}

.article-section .article-comments {
    background-color: var(--main-font-color);
}

Variable names always have to begin with --, and are referenced by var(--my-custom-property). The var() function can also be passed multiple fallback values. For example,

.btn {
    color: var(--main-font-color, #212121);
}

means that the color property is assigned #212121 if --main-font-color is not defined.

Manipulating CSS variables from JavaScript

The CSS Object Model (CSSOM) defines APIs for programmatically manipulating CSS property values. Custom property values can be accessed and modified in the same way as standard CSS properties.

See also