Variabili CSS (Custom Properties)
Le variabili CSS (Custom Properties) permettono di riutilizzare valori in tutto il foglio di stile.
Definire variabili
:root {
--primary-color: #007bff;
--secondary-color: #6c757d;
--spacing: 1rem;
--border-radius: 4px;
}Usare variabili
.button {
background: var(--primary-color);
padding: var(--spacing);
border-radius: var(--border-radius);
}Valore di fallback
.element {
color: var(--text-color, #333); /* Usa #333 se non definita */
}Variabili per tema scuro
:root {
--bg-color: white;
--text-color: #333;
}
[data-theme="dark"] {
--bg-color: #1a1a1a;
--text-color: #fff;
}