Le variabili CSS, anche chiamate "custom properties", sono uno strumento potente che permette di definire un valore e riutilizzarlo all'interno di un foglio di stile. Questo consente di creare codice CSS più pulito, modulare e facile da mantenere.
Le variabili CSS vengono definite utilizzando la sintassi --nome-variabile e possono essere utilizzate ovunque nel foglio di stile, anche all'interno di altre variabili. Per definire una variabile, è necessario utilizzare la seguente sintassi:
:root {
--nome-variabile: valore;
}
Il selettore :root è utilizzato per definire la variabile a livello globale, rendendola disponibile in tutto il foglio di stile.
Una volta definita la variabile, è possibile utilizzarla all'interno di qualsiasi regola CSS, utilizzando la seguente sintassi:
selettore {
proprietà: var(--nome-variabile);
}
Per esempio, se si vuole utilizzare una variabile per definire il colore di sfondo di un elemento, si può definire la variabile come segue:
:root {
--bg: #f0f0f0;
}
e utilizzarla all'interno della regola CSS:
elemento {
background-color: var(--bg);
}
Le variabili CSS possono essere utilizzate anche all'interno di Media Query e selezioni avanzate. Inoltre, è possibile impostare un valore predefinito per la variabile utilizzando la seguente sintassi:
proprietà: var(--nome-variabile, valore-predefinito);
Ciò significa che se la variabile non è stata definita, il valore predefinito verrà utilizzato al suo posto.
In sintesi, le variabili CSS sono uno strumento utile per semplificare la scrittura di codice CSS, rendendolo più pulito e facile da mantenere. Sono utilizzate per definire un valore una sola volta e riutilizzarlo in tutto il foglio di stile. Questo permette di apportare modifiche rapide e globali al sito web, senza dover modificare manualmente ogni regola CSS.