Variables

L'arrivée des variables CSS a été une grande avancée permettant d'éviter des répétitions inutiles, de faciliter la lisibilité du code et d'ajouter une couche de flexibilité au CSS.

Voici un exemple de répétitions (red):

.spider-man .head { background-color: red; }
.spider-man .eye { background-color: white; }
.spider-man .body { background-color: red; }
.spider-man .leg { background-color: red; }

Ce code fonctionne. Cependant, si pour X raisons il est décidé de passer de la version Spider-man 🕷️ Peter Parker 🟥 vers celle Miles Morales 🟦, il faudra modifier chacune des valeurs red pour les mettre à blue. Ce qui requiert du temps et représentera un risque d'erreurs.

Définition

Pour définir une variable globale à la racine du document (ou en anglais root), il suffit d'écrire:

:root {
  --nom-de-la-variable: valeur;
}

Puisque les variables sont héritées, tous les éléments de la page y ont accès, puisqu'ils sont tous enfants de la racine du document.

Pour accéder à une variable, on écrit:

var(--nom-de-la-variable)

Pour reprendre l'exemple de Spider-man, il serait possible d'écrire:

:root { --costume: red; }

.spider-man .head { background-color: var(--costume); }
.spider-man .eye { background-color: white; }
.spider-man .body { background-color: var(--costume); }
.spider-man .leg { background-color: var(--costume); }

Ainsi, simplement en changeant la valeur de la variable --costume de :root { --costume: red; } à :root { --costume: blue; } il serait possible de changer la couleur de Spider-man en entier rapidement et sans risque d'erreur.

Notez qu'il est possible de définir plusieurs variables CSS dans le même élément :root { ... }.

Par exemple:

:root {
  --costume: red;
  --yeux: white;
}

Contexte (scope)

Dans l'exemple précédent, notre variable CSS était définie au root du document. Cependant, il est possible de définir une variable à l'intérieur d'un sélecteur CSS, de sorte que cette variable ne soit disponible uniquement qu'à l'intérieur du sélecteur et de ses enfants.

Par exemple:

.spider-man { --costume: red; }

.spider-man .head { background-color: var(--costume); }
.spider-man .eye { background-color: white; }
.spider-man .body { background-color: var(--costume); }
.spider-man .leg { background-color: var(--costume); }

Ainsi, la variable --costume n'existe que dans le contexte du sélecteur .spider-man. Si elle était utilisée dans un autre sélecteur, par exemple: .green-goblin, elle ne retournerait aucune valeur et donc serait ignorée par le navigateur.

Écraser une variable

En donnant un contexte plus spécifique, il est possible d'écraser la valeur d'une variable.

Par exemple:

:root { --costume: red; }

.spider-man .head { background-color: var(--costume); }
.spider-man .eye { background-color: white; }
.spider-man .body { background-color: var(--costume); }
.spider-man .leg { background-color: var(--costume); }

.green-goblin { --costume: green; }
.green-goblin .head { background-color: var(--costume); }
.green-goblin .eye { background-color: white; }
.green-goblin .body { background-color: var(--costume); }
.green-goblin .leg { background-color: var(--costume); }

Dans cet exemple, la variable --costume à la valeur red dans le contexte globale des styles. Ainsi, si un personnage n'écrase pas cette variable, son costume sera automatiquement rouge 🔴. Tandis que le sélecteur .green-goblin redéfinit la valeur de cette variable dans son propre contexte à green 🟩.