Create CSS custom properties or CSS variables

To create a custom property, or CSS variable, we prefix the variable name with two -- immediately followed by the variable name:

body {
	--primary: #de3c4b;
}

CSS vendor specific property has a prefix -, so it makes sense to have prefix of two -- in CSS custom properties.

We reference the CSS variable with syntax var(--variableName):

body {
	color: var(--primary);
}