Variabili CSS

Variabili CSS

La funzione var() viene utilizzata per inserire i valori delle variabili CSS.

Le variabili CSS possono accedere al DOM, il che significa che puoi creare variabili con un'area di applicazione locale o globale, modificare le variabili con JavaScript e modificare le variabili basate su query di media.

Un buon metodo per utilizzare le variabili CSS riguarda i colori del design. Puoi metterli nelle variabili senza dover copiare e incollare lo stesso colore più volte.

Modo tradizionale

Esempio seguente mostra il modo tradizionale di definire alcuni colori nel foglio di stile (definendo il colore per ogni elemento specifico):

Esempio

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

Prova da Solo

La sintassi della funzione var()

La funzione var() viene utilizzata per inserire i valori delle variabili CSS.

La sintassi della funzione var() è la seguente:

var(name, value)
Valore Descrizione
name Obbligatorio. Nome della variabile (iniziato con due trattini di meno).
value Facoltativo. Valore di fallback (usato quando la variabile non viene trovata).

Nota:Il nome della variabile deve iniziare con due trattini di meno (--), e distingue tra maiuscole e minuscole!

Come funziona var()

Prima di tutto: le variabili CSS possono avere un'area di applicazione globale o locale.

Le variabili globali possono essere accedute/utilizzate in tutto il documento, mentre le variabili locali possono essere utilizzate solo all'interno del selettore in cui sono dichiarate.

Per creare una variabile con un'area di applicazione globale, dichiarala nel selettore :root. Il selettore :root corrisponde all'elemento radice del documento.

Per creare una variabile con un'area di applicazione locale, dichiarala nel selettore che lo utilizzerà.

L'esempio seguente è lo stesso dell'esempio precedente, ma qui utilizziamo la funzione var().

Prima di tutto, dichiariamo due variabili globali (--blue e --white). Poi, utilizziamo la funzione var() per inserire i valori delle variabili in seguito nel foglio di stile:

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

Utilizzare var() ha i seguenti vantaggi:

  • Rende il codice più facile da leggere (più facile da comprendere)
  • Facilita la modifica dei valori di colore

Se si desidera sostituire il blu e il bianco con tonalità di blu e bianco più tenue, è sufficiente modificare due valori di variabili:

Esempio

:root {
  --blue: #6495ed;
  --white: #faf0e6;
}
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

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.