Variables CSS
Declare une variable --accent puis utilise-la pour colorer les cartes.
Objectifs de la leçon
- Déclarer une variable dans :root
- Lire une variable avec var()
- Nommer une intention plutôt qu'une couleur brute
Comprendre le principe
À la fin de cette leçon, tu sauras déclarer une variable dans :root.
À la fin de cette leçon, tu sauras lire une variable avec var().
À la fin de cette leçon, tu sauras nommer une intention plutôt qu'une couleur brute.
Décision nommée
La carte dépend d'un rôle visuel nommé, modifiable depuis un seul endroit.
La variable est déclarée une fois dans :root.
var() la réutilise dans le composant.
Pourquoi éviter : Valeur répétée
Changer l'accent exige de retrouver toutes les occurrences.
Les variables CSS transforment des valeurs isolées en système visuel.
Vocabulaire lié
- propriété personnalisée — Variable CSS dont le nom commence par --.
- :root — Racine du document, souvent utilisée pour les variables globales.
- var() — Fonction qui lit la valeur d'une propriété personnalisée.
Validation
- Je peux expliquer : Les variables CSS transforment des valeurs isolées en système visuel.
- Je peux déclarer une variable dans :root.
- Je peux lire une variable avec var().