Les variables CSS, également appelées propriétés personnalisées, remplacent les valeurs dans des propriétés CSS avec des valeurs définies par l’utilisateur.
Voici comment vous pouvez les utiliser:
1. Déclaration d’une variable CSS:
Vous pouvez déclarer des variables en utilisant deux traits d’union avant le nom de la variable. Les déclarations de variables sont faites dans des sélecteurs CSS. Pour déclarer une variable globale, déclarez-la dans le sélecteur :root.
```
:root {
—couleur-principale: lightgray;
}
```
1. Utilisation d’une variable CSS:
Une fois que vos variables sont déclarées, vous pouvez les utiliser dans votre fichier CSS en utilisant la fonction var(). Placez le nom de la variable comme paramètre de la fonction var().
```
body {
background: var(—couleur-principale);
}
```
1. Mise à jour d’une variable CSS:
Vous pouvez également mettre à jour la valeur d’une variable CSS.
```
:root {
—couleur-principale: lightgray;
}
body {
background: var(—couleur-principale);
}
body.dark-mode {
—couleur-principale: black;
}
```
Dans cet exemple, initialement, nous avons défini la valeur de la variable —couleur-principale comme lightgray. Cependant, si la classe dark-mode est appliquée à l’élément body, alors la valeur de la variable —couleur-principale est mise à jour à black.
Notez que la portée de la variable est importante. De manière générale, la variable est accessible dans le sélecteur où elle a été définie et dans ses descendants.
