Variables

Les variables en css permettent de rendre un theme css plus dynamique en offrant la possiblité de changer les couleurs, tailles etc depuis un seul endroit.
De plus elles facilites la cohérence et la maintenance du css.
Si on définit un margin de 7px plusieurs fois et à plusieurs endroit il est plus facile d'utiliser la valeur d'une variable que de le déclarer plusieurs fois dans le fichier.

Déclaration

Pour déclarer une variable en CSS, utilisez le préfixe -- suivi du nom de la variable et sa valeur. Ici on déclare une variable nommée --main-color avec une valeur de #3366ff.

:root {
  --main-color: #3366ff;
}

remarque

:root est une pseudo class qui cible l'élément principal du document html.
Ce qui permet de déclarer une variable globale.

Utilisation

Une fois déclaré la variable css peut être utiliser au sein d'une déclaration via le mot clé var()

body {
  background-color: var(--main-color);
}

Ici la couleur d'arrière-plan du corps sera définie en utilisant la valeur de la variable --main-color.

Locales

En plus des variables globales définies dans :root, il est possible de définir des variables locales à l'intérieur d'un sélecteur spécifique.
Ces variables locales ne seront accessibles qu'à partir de ce sélecteur et de ses descendants.

.container {
  --text-color: #4A4E69;
}

.container p {
  color: var(--text-color);
}

Ici --text-color est une variable locale définie à l'intérieur du sélecteur .container et elle est utilisée pour définir la couleur du texte des paragraphes à l'intérieur de .container.