10.1 Dichiarazione delle variabili
Le variabili in CSS, note anche come proprietà personalizzate (CSS Custom Properties), permettono agli sviluppatori di salvare i valori delle proprietà in un unico posto e riutilizzarli nel documento. Questo rende il CSS più flessibile e gestibile, specialmente quando si lavora con progetti di grandi dimensioni.
Dichiarazione delle variabili
Le variabili in CSS vengono dichiarate utilizzando due trattini (--) davanti al nome della variabile. Solitamente vengono dichiarate all'interno del selettore :root, per renderle accessibili in tutto il documento.
Sintassi:
:root {
--nome-variabile: valore;
--nome-variabile: valore;
}
Esempio:
In questo esempio sono dichiarate tre variabili: --main-color, --secondary-color, e --font-size.
:root {
--main-color: #3498db;
--secondary-color: #2ecc71;
--font-size: 16px;
}
10.2 Uso delle variabili
Per utilizzare le variabili si usa la funzione var(), che prende il nome della variabile come argomento.
Sintassi:
selettore {
proprietà: var(--nome-variabile);
proprietà: var(--nome-variabile);
}
Esempio:
Questo esempio utilizza le variabili dichiarate in precedenza per stilizzare lo sfondo, il colore del testo e la dimensione del carattere dell'elemento <body>.
body {
background-color: var(--main-color);
color: var(--secondary-color);
font-size: var(--font-size);
}
10.3 Ereditarietà e ridefinizione delle variabili
Le variabili CSS vengono ereditate per gerarchia degli elementi. Questo significa che se una variabile è dichiarata in un elemento, sarà disponibile anche per i suoi elementi figli. Le variabili possono anche essere ridefinite all'interno di altri selettori.
Esempio:
In questo esempio, l'elemento .header ridefinisce la variabile --main-color e questa nuova variabile viene applicata solo ad esso. Allo stesso tempo, l'elemento .footer utilizza il valore della variabile dichiarata in :root.
<div class="header">Header</div>
<div class="footer">Footer</div>
:root {
--main-color: #3498db;
}
.header {
--main-color: #e74c3c;
background-color: var(--main-color);
}
.footer {
background-color: var(--main-color);
}
10.4 Vantaggi dell'uso delle variabili CSS
1. Semplificazione della gestione degli stili:
Le variabili permettono di cambiare il valore di una proprietà in un solo posto, e questa modifica si applica automaticamente a tutti i posti in cui la variabile è utilizzata. Questo è particolarmente utile per la tematizzazione e il mantenimento di uno stile coerente.
2. Miglioramento della leggibilità e manutenzione del codice:
L'uso delle variabili rende il codice CSS più leggibile e comprensibile, poiché possono essere utilizzate per descrivere valori, come colori e dimensioni, che possono avere un significato semantico (esempio, --main-color invece di #3498db).
3. Aggiornamento dinamico degli stili:
Le variabili possono essere modificate dinamicamente tramite JavaScript, permettendo di creare interfacce utente più interattive e dinamiche.
GO TO FULL VERSION