Variables

4

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.

Remarquez-le : avant le mot-clé root, ainsi que les -- avant le nom de la variable.

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.

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 🟩.

Même si un personnage est défini après .green-goblin, si il utilise la variable --costume, celle-ci retournera red, car la valeur green n'est retournée qu'à l'intérieur du contexte du sélecteur .green-goblin.

Différence avec les variables de préprocesseur

À priori, les variables CSS peuvent ressembler aux variables des préprocesseurs tels que: Sass et Less. Cependant, elles diffèrent sur un point important. Les variables des préprocesseurs sont calculées lors de la compilation. Bref, une fois compilé, il ne reste aucune trace de la variable en soi. Chaque occurrence de la variable a été remplacée par sa valeur. Il est donc impossible de mettre à jour une variable lorsqu'elle est affichée dans le navigateur.

En revanche, les variables CSS font partie du DOM et n'ont pas besoin d'être compilées. Il est donc possible de les manipuler à même le navigateur ou encore en JavaScript.

Par exemple, si vous inspecter la balise <html> de cette page. Vous remarquerez que plusieurs variables CSS sont définies. Vous pouvez remplacer leurs valeurs et voir les changements s'appliquer immédiatement.

Pour en savoir plus, voir cet article MDN sur les variables CSS.

Donnez votre opinion
sur les notes de cours sur cette page.
Merci d'avoir partagé ton opinion 😎
Pssst, c'est 💯 anonyme