CSS remplaçant les variables

Remplacer la variable globale par une variable locale

De la page précédente, nous avons appris que les variables globales peuvent être consultées/utilisées dans tout le document, tandis que les variables locales ne peuvent être utilisées qu'à l'intérieur du sélecteur où elles sont déclarées.

Regardez l'exemple de la page précédente :

Parfois, nous souhaitons que les variables ne changent que dans une section spécifique de la page.

Supposons que nous voulions une couleur de bleu différente pour les éléments de bouton. Ensuite, nous pouvons re-déclarer la variable --blue à l'intérieur du sélecteur de bouton. Lorsque nous utilisons var(--blue) dans ce sélecteur, il utilisera la valeur de la variable locale --blue déclarée ici.

Nous voyons que la variable locale --blue remplacera la variable globale --blue pour les éléments du bouton :

Ajouter une nouvelle variable locale

Si une variable ne doit être utilisée qu'à un seul endroit, on aurait aussi pu déclarer une nouvelle variable locale, comme ceci :

Prise en charge du navigateur

Les chiffres du tableau indiquent la première version du navigateur qui prend entièrement en charge la var()fonction.

Fonction CSS var()