CSS variables

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.