CSS: usare le variabili

CSS: usare le variabili

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.

Torna su