Le variabili CSS, note anche come proprietà personalizzate, ti permettono di definire valori ricorrenti in un unico luogo, facilitando l’aggiornamento e la manutenzione del tuo codice CSS.
Ecco come puoi usarle:
1. Definire una variabile CSS: Creare una variabile CSS è semplice. Tutto ciò di cui hai bisogno è un nome di variabile che inizia con due trattini e un valore. Ad esempio:
\`\`\` :root { —main-color: #06c; } \`\`\` In questo esempio, `—main-color` è il nome della nostra variabile e `#06c` è il valore. L’uso di `:root` come selettore rende la variabile disponibile globalmente.1. Utilizzare una variabile CSS: Puoi utilizzare una variabile CSS utilizzando la funzione `var()` come valore di una proprietà CSS. Ad esempio:
\`\`\` div { background-color: var(—main-color); } \`\`\` In questo esempio, il colore di sfondo di tutti i `div` sarà il colore definito dalla variabile `—main-color`.1. Modificare una variabile CSS: Puoi modificarla semplicemente cambiando il valore della variabile. Ad esempio:
\`\`\` :root { —main-color: #f06; } \`\`\` Ora, il colore di sfondo di tutti i `div` sarà `#f06` anziché `#06c`.Le variabili CSS sono molto utili per mantenere coerenti i temi di colore, per modificare facilmente i temi, per ridurre la quantità di codice che devi scrivere, e per molte altre ragioni. Puoi trasformare il tuo codice CSS in qualcosa di molto più gestibile e manutenibile utilizzando le variabili CSS.
