Variabili in CSS

La funzione var() 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, cambiarle con JavaScript e modificarle in base alle media query.

Un buon modo per utilizzare le variabili CSS riguarda i colori del tuo design. Invece di copiare e incollare gli stessi colori più volte, puoi inserirli nelle variabili.

Sintassi della funzione var()

La sintassi della funzione var() è la seguente:

var(--nome, valore)

• nome (Obbligatorio). Il nome della variabile. Deve iniziare con due trattini ed è case sensitive.
• valore (Facoltativo). Il valore di fallback che viene usato se la variabile non viene trovata

Come funziona var()

Le variabili CSS possono avere uno scope globale o locale.

Le variabili globali possono essere accessibili 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 scope globale, dichiarala all’interno del selettore :root. Il selettore :root corrisponde all’elemento radice del documento.

Per creare una variabile con scope locale, dichiarala all’interno del selettore che la utilizzerà.

Prima di tutto, dichiariamo due variabili globali (—rosso e —giallo). Quindi utilizziamo la funzione var() per inserire il valore delle variabili successivamente nel foglio di stile:

:root {
  --rosso: red;
  --giallo: yellow;
}

body {
  background-color: var(--rosso);
}

h2 {
  border-bottom: 2px solid var(--rosso);
}

I vantaggi dell’utilizzo di var() sono:

• rende il codice più facile da leggere
• rende molto più semplice modificare i valori dei colori