Variabili CSS - La funzione var()
Variabili CSS
La var()funzione viene utilizzata per inserire il valore di una variabile CSS.
Le variabili CSS hanno accesso al DOM, il che significa che puoi creare variabili con ambito locale o globale, modificare le variabili con JavaScript e modificare le variabili in base alle query multimediali.
Un buon modo per utilizzare le variabili CSS è quando si tratta dei colori del tuo design. Invece di copiare e incollare gli stessi colori più e più volte, puoi inserirli nelle variabili.
Il modo tradizionale
L'esempio seguente mostra il modo tradizionale di definire alcuni colori in un foglio di stile (definendo i colori da utilizzare, per ogni specifico elemento):
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;
}
Sintassi della funzione var()
La var()funzione viene utilizzata per inserire il valore di una variabile CSS.
La sintassi della var()funzione è la seguente:
var(--name, value)
| Value | Description |
|---|---|
| name | Required. The variable name (must start with two dashes) |
| value | Optional. The fallback value (used if the variable is not found) |
Nota: il nome della variabile deve iniziare con due trattini (--) e fa distinzione tra maiuscole e minuscole!
Come funziona var()
Prima di tutto: le variabili CSS possono avere un ambito globale o locale.
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.
Per creare una variabile con ambito globale, dichiararla all'interno del :root
selettore. Il :rootselettore corrisponde all'elemento radice del documento.
Per creare una variabile con ambito locale, dichiararla all'interno del selettore che la utilizzerà.
L'esempio seguente è uguale all'esempio precedente, ma qui usiamo la var()funzione.
Innanzitutto, dichiariamo due variabili globali (--blue e --white). Quindi, utilizziamo la
var()funzione per inserire il valore delle variabili più avanti 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;
}
I vantaggi dell'utilizzo di var() sono:
- rende il codice più facile da leggere (più comprensibile)
- rende molto più facile modificare i valori del colore
Per cambiare il colore blu e bianco in un blu e bianco più tenui, devi solo cambiare i due valori delle 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;
}
Supporto browser
I numeri nella tabella specificano la prima versione del browser che supporta completamente la
var()funzione.
| Function | |||||
|---|---|---|---|---|---|
| var() | 49.0 | 15.0 | 31.0 | 9.1 | 36.0 |
CSS var() Funzione
| Property | Description |
|---|---|
| var() | Inserts the value of a CSS variable |