Variabili Coperte CSS

Coprire le variabili globali con le variabili locali

Come abbiamo appreso dalla pagina precedente, possiamo accedere/uso le variabili globali in tutto il documento, mentre le variabili locali possono essere utilizzate solo all'interno del selettore in cui sono dichiarate.

Vediamo l'esempio della pagina precedente:

Esempio

:root {
  --blue: #1e90ff;
  --white: #ffffff;
}
body {
  background-color: var(--blue);
}
h2 {
  border-bottom: 2px solid var(--blue);
}
.container {
  color: var(--blue);
  background-color: var(--white);
  padding: 15px;
}
button {
  background-color: var(--white);
  color: var(--blue);
  border: 1px solid var(--blue);
  padding: 5px;
}

Prova da Solo

A volte, desideriamo che la variabile venga modificata solo in una parte specifica della pagina.

Supponiamo che vogliamo che l'elemento button utilizzi un diverso blu. Possiamo ridefinire la variabile --blue all'interno del selettore button. Quando utilizziamo var(--blue) in questo selettore, utilizzerà il valore della variabile --blue locale dichiarata qui.

Vediamo che la variabile locale --blue copre la variabile globale --blue dell'elemento button:

Esempio

:root {
  --blue: #1e90ff;
  --white: #ffffff;
}
body {
  background-color: var(--blue);
}
h2 {
  border-bottom: 2px solid var(--blue);
}
.container {
  color: var(--blue);
  background-color: var(--white);
  padding: 15px;
}
button {
  --blue: #0000ff;
  background-color: var(--white);
  color: var(--blue);
  border: 1px solid var(--blue);
  padding: 5px;
}

Prova da Solo

Aggiungere una nuova variabile locale

Se si utilizza una variabile in un solo luogo, possiamo dichiarare una nuova variabile locale, come nel seguente esempio:

Esempio

:root {
  --blue: #1e90ff;
  --white: #ffffff;
}
body {
  background-color: var(--blue);
}
h2 {
  border-bottom: 2px solid var(--blue);
}
.container {
  color: var(--blue);
  background-color: var(--white);
  padding: 15px;
}
button {
  --button-blue: #0000ff;
  background-color: var(--white);
  color: var(--button-blue);
  border: 1px solid var(--button-blue);
  padding: 5px;
}

Prova da Solo

Supporto Browser

I numeri nella tabella indicano la versione del browser che supporta completamente l'attributo.

Funzione
var() 49.0 15.0 31.0 9.1 36.0

Funzione var() CSS

Funzione Descrizione
var() Inserisci il valore della variabile CSS.