Chargement...

Variables CSS

Les filtres modifiaient les pixels. Les custom properties (variables CSS) simplifient la maintenance : un --brand sur :root, des boutons lisent var(--brand) — changez le jeton une fois, l’UI suit. Elles cascadent et s’héritent ; vous choisissez les noms.

Vos noms : `--token`

Comme une déclaration, mais le nom commence par deux tirets :

Jetons globaux sur :root

css

:root {
--brand: #2563eb;
--brand-contrast: #ffffff;
--surface: #f8fafc;
--text: #0f172a;
--radius-md: 0.5rem;
--space-3: 0.75rem;
}

:root = racine du document — jetons site-wide. --names sur tout sélecteur ; les descendants héritent sauf override proche.

Lire avec `var()`

Bouton primaire branché aux jetons

css

.btn-primary {
background: var(--brand);
color: var(--brand-contrast);
border: none;
border-radius: var(--radius-md);
padding: var(--space-3) calc(var(--space-3) * 1.5);
font: inherit;
cursor: pointer;
}

.btn-primary:hover {
background: color-mix(in srgb, var(--brand) 88%, black);
}

Focus : jetons + var(). Noms cohérents dans le projet.

Repli dans `var()`

Repli si jeton absent

css

.card {
background: var(--surface, #ffffff);
color: var(--text, #111827);
border-radius: var(--radius-md, 8px);
box-shadow: var(--shadow-sm, 0 1px 2px rgba(15, 23, 42, 0.08));
}

Le 2ᵉ argument est un repli ; une faute dans le nom de var() reste fausse.

Portée et overrides locaux

📊 Où placer les custom properties

Portée	Sélecteur	Quand
Jetons globaux	`:root`	Marque, espacements, rayons
Thème composant	`.card`, `.alert`	Defaults d’un pattern
Variante	`.card.is-warning`	Changer quelques jetons
Runtime	`[data-theme="dark"]`	Nouvelle palette ; mêmes noms `var()`

Override près de l’élément. :root touche tout ; parfois un --accent local suffit.

Accent local sur une card

Sous-arbre card avec accent

css

.card {
--accent: var(--brand);
background: var(--surface);
border: 1px solid color-mix(in srgb, var(--accent) 25%, transparent);
border-radius: var(--radius-md);
padding: var(--space-3);
}

.card.is-featured {
--accent: #7c3aed;
}

.card__title {
color: var(--accent);
}

.is-featured ne change que --accent ; titre et bordure suivent via var().

Thème sans dupliquer chaque couleur

Clair par défaut, sombre via data-theme

css

:root {
--surface: #f8fafc;
--text: #0f172a;
--brand: #2563eb;
}

[data-theme="dark"] {
--surface: #0f172a;
--text: #e2e8f0;
--brand: #60a5fa;
}

body {
background: var(--surface);
color: var(--text);
}

JS peut basculer dataset.theme — mise à jour live des jetons.

Custom properties vs `$` Sass

Sass disparaît à la compilation ; --tokens vivent dans la cascade du navigateur.

À vous

Cinq jetons sur :root ; bouton avec var() seulement.
--accent + .is-featured.
Jeton retiré + fallback.
[data-theme="dark"] dans DevTools.
Remplacer #2563eb répété par var(--brand).

Erreurs fréquentes

brand: sans --
var() comme nom de propriété
typo sans repli

Résumé

--name ; var(--name, fallback)
:root global ; override local
Suite : calc (Modern Toolkit)

🧠 Testez Vos Connaissances

Prêt à Commencer

Testez Vos Connaissances

Mettez-vous au défi avec ce quiz interactif et voyez à quel point vous comprenez le sujet

❓

Questions

🎯

70%

Pour Réussir

♾️

∞

Temps

🔄

∞

Tentatives

📝 Instructions

Lisez chaque question attentivement
Sélectionnez la meilleure réponse pour chaque question
Vous pouvez refaire le quiz autant de fois que vous le souhaitez
Votre progression sera affichée en haut

Langue