Variables

CSS variables or custom properties are property names prefixed with --, their values can be used in other declarations using the var() function. CSS variables are scoped to the element they are declared on.

Define variables on the :root pseudo-class, so that it can be referenced globally:

:root {
    --primary-color: #0000FF;
    --secondary-color: #DDDDDD;
}

Access variables with var():

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

button {
    background-color: var(--secondary-color);
}

var() also accepts a default value, in case the variable is not defined:

button {
    background-color: var(--secondary-color, blue);
}