Un po' come le variabili in JavaScript, anche in CSS si possono dichiarare e usare le variabili. In questa lezione, vediamo come dichiarare le variabili CSS e come usare la funzione var() in CSS.
Le variabili sono delle proprietà personalizzate in CSS che ti permettono di salvare un valore al loro interno, ad esempio un colore, che puoi utilizzare nelle proprietà CSS.
Per dichiarare una variabile, è sufficiente usare questa sintassi: --nomeVariabile: valore
Le variabili CSS sono generalmente definite all'interno di un selettore globale, come :root (che rappresenta il selettore dell'intera pagina HTML, simile a <html>), per renderle disponibili in tutto il documento. Tuttavia, puoi dichiararle anche all'interno di un elemento, e potrai utilizzarle solo all'interno di quell'elemento.
:root {
--colore-principale: green;
--colore-secondario: darkgreen;
}Dichiarare una variabile ti può permettere di risparmiare tempo, in quanto non è necessario ricordarsi il valore della proprietà personalizzata, ma soltanto il nome. Ad esempio, quando hai un colore complicato da ricordare:
:root {
--colore-principale: #ffebcd;
--colore-secondario: #a52a2a;
}La funzione var() in CSS è utilizzata per richiamare le variabili CSS personalizzate, consentendo di riutilizzare valori definiti in precedenza nel codice CSS. La funzione var() può essere utilizzata in qualsiasi proprietà CSS.
La sintassi da usare è: proprietà: var(--nomeVariabile, valoreDiRiserva). Come specificato prima, il nome della variabile deve sempre iniziare con --. Il valoreDiRiserva è il valore da inserire nel caso la variabile personalizzata non fosse disponibile.
Ad esempio, vogliamo aggiungere un colore, precedentemente dichiarato in una variabile, per lo sfondo di un elemento (quindi, usando background-color):
<div>Testo di esempio</div>
<style>
:root {
--arancio: #ffebcd;
}
div {
background-color: var(--arancio);
padding: 10px;
}
</style>Nel caso in cui la variabile non sia disponibile, possiamo specificare un valore di riserva. Questo verrà usato nel caso il valore della variabile personalizzata non sia disponibile (ad esempio, quando non viene dichiarata):
<div>Testo di esempio</div>
<style>
div {
background: var(--arancio, orange);
padding: 10px;
}
</style>