Variables en CSS

Introduction aux Variables CSS

Les variables CSS, également connues sous le nom de propriétés personnalisées, sont des outils puissants permettant de définir des valeurs que l'on peut réutiliser à travers tout le stylesheet. Cela facilite la gestion de la propreté et de la cohérence du code.

Comment Définir et Utiliser des Variables CSS

Pour intégrer des variables CSS, il faut suivre deux étapes fondamentales :

1. Définir la variable personnalisée dans un élément choisi.

element {  --ma-variable-personnalisee: red;}

1. Utiliser la fonction var() pour appliquer cette variable à différents éléments :

elementA {  background-color: var(--ma-variable-personnalisee);}
.elementBAvecClasse {  background-color: var(--ma-variable-personnalisee);}
#elementCAvecId {  background-color: var(--ma-variable-personnalisee);}