CSS custom properties
What it is and why you might need it

General description

CSS custom properties (or CSS variables) allow developers to specify variable values (even during runtime) and use them for any declarations. The content values are individually selectable - hex color values, box-shadow definitions or the font size can be stored.

Syntax

In the following example you can see the custom properties in use. Two CSS custom properties are declared and used in the css rulesets.

/*Define all variables within the root*/
:root {
	--font-main: "Montserrat, sans-serif";
	--shadow-level-1: 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12),
		0 2px 4px -1px rgba(0, 0, 0, 0.3);
}

/* Define font-family */
body {
	font-family: var(--font-main);
}

.shadow-box {
	box-shadow: var(--shadow-level-1);
}

It can be seen that the rule sets can be called with the var() function. Thus, the custom properties can be addressed and assigned to the corresponding element.

Hints

Note that the selector assigned to the ruleset defines the scope in which the custom property can be used. A common practice is to define custom properties in the pseudo-class :root so that they can be used globally in the HTML document: