Variables CSS

Voir developer.mozilla.org.

Utilise -- pour définir une variable et var() pour l'utiliser.
La règle CSS où la variable est déclarée définit la portée de l'utilisation de la variable.

.element {
    --main-bg-color: brown;
    background-color: var(--main-bg-color);
}

Usage courant : définir les variables dans le pseudo-élément :root pour les avoir disponibles dans toutes les autres règles.

:root {
    --main-bg-color: brown;
}
.test {
    background-color: var(--main-bg-color);
}

Héritage

Les variables sont héritées comme les règles CSS habituelles.

Valeurs par défaut

Sera utilisée si la règle n'existe pas.

.test {
    background-color: var(--main-bg-color, red);
}