Formation CSS | Utiliser les Variables
Les variables CSS, aussi appelées propriétés personnalisées, sont des conteneurs nommés permettant de stocker des valeurs à réutiliser.
Qu’est-ce qu’une variable CSS ?
Une variable CSS est similaire aux variables utilisées dans le monde de la programmation. Elles permettent de définir des conteneurs nommés stockant des valeurs à utiliser dans nos règles CSS.
Travailler avec des variables CSS permet de bénéficier de nombreux avantages :
- Rassembler son design system (couleurs, typos…) pour plus de clarté
- Respecter le principe du DRY (Dont Repeat Yourself) en ne dupliquant pas des valeurs identiques
- Simplifier la maintenance de son code
Déclaration d’une variable CSS
Syntaxe
Toute variable CSS est précédée de deux tirets --
, suivie de son nom. Le nom d’une variable doit être le plus explicite possible vis-à-vis de la valeur stockée.
La valeur stockée correspond à une valeur de propriété CSS.
--color-primary: #5b47f0;
--color-secondary: #0f172a;
--typo: 'Poppins', sans-serif;
Portée
La portée d’une variable définit l’espace dans lequel les variables vont être accessibles. Les variables CSS peuvent avoir une portée soit globale, soit locale.
Variable globale
Pour qu’une variable soit accessible n’importe où dans notre feuille CSS (à l’intérieur de n’importe quel sélecteur), on la définira dans un sélecteur global nommé :root
.
:root {
--color-primary: #5b47f0;
--color-secondary: #0f172a;
--typo: 'Poppins', sans-serif;
}
Variable locale
Pour qu’une variable soit accessible uniquement pour un sélecteur précis, on la définira au sein du sélecteur en question.
.btn {
--bg-color: #5b47f0;
--text-color: #ffffff;
}
Utilisation
Pour appeler ces variables dans une règle CSS, on fait appel à la variable souhaitée en argument de la fonction var()
.
body > header {
background-color: var(--color-secondary);
}