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