Phase 4 — Responsive & moderne
#14 Variables CSS
--custom-properties, var(), thèmes
Les propriétés personnalisées CSS
Les variables CSS (propriétés personnalisées) permettent de définir des valeurs réutilisables. Elles commencent par -- et sont utilisées avec var() :
Définir et utiliser des variables
:root {
--color-primary: #3b82f6;
--color-text: #1a1a2e;
--spacing-sm: 8px;
--spacing-md: 16px;
--spacing-lg: 32px;
--radius: 8px;
}
.card {
color: var(--color-text);
padding: var(--spacing-lg);
border-radius: var(--radius);
}Thèmes avec les variables
Mode sombre
:root {
--bg: #ffffff;
--text: #1a1a2e;
--card-bg: #f8f7f4;
}
@media (prefers-color-scheme: dark) {
:root {
--bg: #0f0f1a;
--text: #e0e0f0;
--card-bg: #1a1a2e;
}
}
body {
background: var(--bg);
color: var(--text);
}Portée et héritage
Variables avec portée
.section-bleue {
--accent: #3b82f6;
}
.section-verte {
--accent: #10b981;
}
/* Les deux sections utilisent --accent avec des valeurs différentes */
.section-bleue .button,
.section-verte .button {
background: var(--accent);
}Valeurs de repli
Repli
/* Si --accent n'est pas défini, utiliser #3b82f6 */
color: var(--accent, #3b82f6);À vous de jouer
Essayez les commandes ci-dessous :
terminal — browser