En CSS, on ne peut pas déclarer des variables au sens d'autres langages de programmation comme JavaScript ou Python. Cependant, CSS a introduit les variables personnalisées, également appelées variables CSS, qui permettent de stocker des valeurs pour les réutiliser dans tout le document CSS.
Voici comment déclarer et utiliser des variables en utilisant les Custom Properties en CSS :
:root {
--main-color: #005792;
--background-color: #f2f2f2;
}
body {
background-color: var(--background-color);
color: var(--main-color);
}
h1 {
color: var(--main-color);
}
Dans l'exemple ci-dessus, --main-color
et --background-color
sont des variables CSS. Elles sont définies dans le sélecteur :root
(représentant l'élément racine du document) et peuvent être utilisées dans tout le document CSS à l'aide de la fonction var()
.