Variabili di sostituzione CSS

Sostituisci la variabile globale con la variabile locale

Dalla pagina precedente abbiamo appreso che le variabili globali sono accessibili/utilizzabili attraverso l'intero documento, mentre le variabili locali possono essere utilizzate solo all'interno del selettore in cui sono dichiarate.

Guarda l'esempio della pagina precedente:

A volte vogliamo che le variabili cambino solo in una sezione specifica della pagina.

Supponiamo di volere un diverso colore di blu per gli elementi dei pulsanti. Quindi, possiamo dichiarare nuovamente la variabile --blue all'interno del selettore dei pulsanti. Quando usiamo var(--blue) all'interno di questo selettore, utilizzerà il valore della variabile locale --blue qui dichiarato.

Vediamo che la variabile locale --blue sovrascriverà la variabile globale --blue per gli elementi del pulsante:

Aggiungi una nuova variabile locale

Se una variabile deve essere utilizzata in un solo posto, avremmo anche potuto dichiarare una nuova variabile locale, come questa:

Supporto browser

I numeri nella tabella specificano la prima versione del browser che supporta completamente la var()funzione.

CSS var() Funzione