Les variables de couleurs en CSS
Objectifs pédagogiques :
- Comprendre le concept et l’utilité des variables CSS.
- Apprendre à définir des variables globales pour les couleurs dans
:root. - Savoir comment appeler ces variables dans le code CSS.
- Structurer un code CSS clair, réutilisable et facile à modifier.
Explications simples :
- Variables CSS : Ce sont des conteneurs où vous stockez des valeurs comme des couleurs. Elles permettent de centraliser les choix de design et de les réutiliser facilement.
- Définition globale : Les variables sont généralement définies dans
:root, une pseudo-classe représentant l’élément racine du document (le<html>). - Appels dans le code CSS : On utilise la syntaxe
var(--nom-de-la-variable)pour appliquer la valeur d’une variable dans des règles CSS.
Exemple de code à copier dans CodePen
HTML (à gauche dans CodePen) :
<div class="section primary">
Bienvenue dans les variables CSS
</div>
<div class="section secondary">
Faciles à utiliser
</div>
<div class="section tertiary">
Modifiez une couleur ici pour tout changer
</div>
CSS (à droite dans CodePen) :
/* Définir les variables de couleurs */
:root {
--primary-color: #3498db; /* Bleu clair */
--secondary-color: #e74c3c; /* Rouge */
--tertiary-color: #2ecc71; /* Vert */
--text-light: #ffffff; /* Blanc */
--text-dark: #2c3e50; /* Noir */
--bg-color: #ecf0f1; /* Gris clair */
}
/* Styles globaux */
body {
background-color: var(--bg-color);
font-family: Arial, sans-serif;
color: var(--text-dark);
margin: 0;
padding: 0;
}
/* Style des sections */
.section {
padding: 20px;
margin: 10px;
border-radius: 5px;
text-align: center;
font-size: 1.2em;
}
/* Utilisation des variables */
.primary {
background-color: var(--primary-color);
color: var(--text-light);
}
.secondary {
background-color: var(--secondary-color);
color: var(--text-light);
}
.tertiary {
background-color: var(--tertiary-color);
color: var(--text-dark);
}
Explication détaillée de la syntaxe des variables de couleurs :
1. Déclaration des variables dans :root :
:root: Cette pseudo-classe représente l’élément racine (<html>). Définir les variables dans:rootpermet de les rendre accessibles partout dans le document.- Syntaxe :cssCopier le code
:root { --nom-de-la-variable: valeur; }Exemple concret :cssCopier le code:root { --primary-color: #3498db; }Ici,--primary-colorest une variable qui stocke la valeur#3498db(un bleu clair).
2. Appel des variables avec var() :
- Pour utiliser une variable CSS, on appelle sa valeur à l’aide de la fonction
var(). - Syntaxe :cssCopier le code
propriété: var(--nom-de-la-variable);Exemple concret :cssCopier le codebackground-color: var(--primary-color);Ici,var(--primary-color)insère la valeur#3498dblà où la propriétébackground-colorest appliquée.
3. Structure globale de l’utilisation :
- Les variables sont définies dans
:root:cssCopier le code:root { --primary-color: #3498db; } - On les appelle dans des règles CSS spécifiques :cssCopier le code
.primary { background-color: var(--primary-color); }Cela signifie que l’élément avec la classe.primaryaura un fond bleu clair grâce à la variable--primary-color.
4. Avantages des variables CSS :
- Centralisation : Vous pouvez modifier la valeur d’une couleur dans
:root, et tous les endroits où cette variable est utilisée seront automatiquement mis à jour. - Lisibilité : Les noms des variables (comme
--primary-color) rendent le code plus compréhensible. - Réutilisabilité : Une même couleur peut être utilisée dans plusieurs endroits sans devoir copier la valeur exacte à chaque fois.
Testez le code dans CodePen et modifiez les couleurs dans :root pour observer l’impact global sur les styles.