Variables

Pour insérer la valeur d’une variable, en CSS, la fonction var() est utilisée.

Les variables CSS ont accès au DOM (Document Object Model - le modèle Objet d’un document). Cela signifie que les variables peuvent être modifiées en JavaScript et ou bien encore basées sur les media queries. Cela donne également la possibilité de définir si une variable est locale (cela signifie qu’elle ne peut être modifiée que dans le programme actuel) ou si elle est globale (permettant de modifier la variable dans d’autres programmes).

Généralement, les variables CSS sont utilisées pour les couleurs. Quand il s’agit de définir une couleur, plutôt que de l’écrire encore et encore dans la feuille de style, cette couleur est stockée dans une variable et est utilisée encore et encore. D’autres utilisations sont bien évidemment possibles : gestion des polices d’écritures, de tailles, de marges, etc.

Manière traditionnelle

Habituellement, les couleurs sont définies comme suit :

body {
    background-color : rgb(255, 9, 155);
}

h1 {
    background-color: orange;
    color: rgb(255, 9, 155);
}

div p {
    background-color: rgb(255, 9, 155);
}

Syntaxe

La syntaxe de la fonction var() est la suivante :

var(nom, valeur);

Le nom de la variable est obligatoire. La valeur est optionnelle.

Remarque : Le nom d’une variable CSS doit obligatoirement commencer par deux tirets (--) et est sensible à la casse, ce qui veut dire que si le nom d’une variable est en majuscule, il faudra, par la suite, toujours l’écrire en majuscule lorsqu’elle sera réutilisée.

Fonctionnement de var()