Variabili CSS: cosa sono e come utilizzarle

Le variabili CSS (più formalmente, le proprietà personalizzate di CSS), consentono di organizzare in maniera più efficiente le regole Cascading Style Sheets.

In questo articolo vedrai come si dichiarano e si utilizzano le proprietà CSS.

Inoltre, avrai modo di vedere ed interagire con un esempio che utilizza le variabili CSS.

Indice

Variabili CSS: come si dichiarano

Le variabili CSS possono essere dichiarate nel modo seguente:

selettore {
  --nome-proprieta: valore
}

Solitamente, viene utilizzato lo pseudo-selettore :root.

Tale selettore consente di utilizzare le proprietà definite in qualunque elemento HTML.

:root {
  --nome-proprieta: valore
}

Variabili CSS: come si usano

Vediamo ora un esempio pratico di dichiarazione ed utilizzo di variabili CSS.

:root {
  --colore-testo: red;
  --dimensione-testo: 2rem;
}
p {
  color: var(--colore-testo);
  font-size: var(--dimensione-testo);
}
ul li,
ol li {
  color: var(--colore-testo);
  font-size: var(--dimensione-testo);
}

In questo estratto codice abbiamo definito le proprietà CSS --colore-testo e --dimensione-testo.

Quindi, abbiamo definito i valori per le proprietà color e font-size per i paragrafi e gli elementi delle liste, siano esse ordinate o non ordinate.

Se questi concetti non ti fossero chiari, ti invito a leggere il post Selettori CSS: una guida pratica con esempi.

Questa organizzazione del codice consente di centralizzare i valori principali utilizzati nelle regole CSS.

Inoltre, come vedrai nella sezione dedicata all’esempio pratico, grazie a JavaScript potremo modificare le proprietà personalizzate CSS dinamicamente.

In questo modo, riusciremo a modificare radicalmente l’aspetto dell’applicazione web in pochi passi.

Variabili CSS: un esempio pratico

In questo esempio ho implementato il concetto di tema grafico.

Avrai la possibilità di cambiare tema cliccando sui pallini in alto.

I temi disponibili sono light, dark e pink.

Tile 1

Testo di Tile 1

Tile 2

Testo di Tile 2

Tile 3

Testo di Tile 3

Tile 4

Testo di Tile 4

Tile 5

Testo di Tile 5

Tile 6

Testo di Tile 6

L’implementazione è basata sulle seguenti proprietà CSS:

:root {
  --bordo-tile: #a2a2ec;
  --sfondo-tile: #c2c0c0;
  --testo-tile: #6464e7;
}

I valori di queste proprietà costituiscono il tema.

In altre parole, tali valori caratterizzeranno l’aspetto che il tema conferirà all’applicazione web.

#esempio-variabili-css .tiles .tile {
  border: 3px solid var(--bordo-tile);
  background-color: var(--sfondo-tile);
}
#esempio-variabili-css .tiles .tile p.title,
#esempio-variabili-css .tiles .tile p {
  color: var(--testo-tile);
}

Il codice CSS riportato qui sopra è quello utilizzato per applicare le regole definite dal tema attivo.

Riporto anche una versione semplificata del codice JavaScript che applica il tema selezionato in funzione del pallino selezionato;

const selectedTheme = {
    "--bordo-tile": "#a2a2ec",
    "--sfondo-tile": "#c2c0c0",
    "--testo-tile": "#6464e7"
};
const htmlElement = document.querySelector("html");
Object.keys(unserializedTheme).forEach((property) => {
  htmlElement.style.setProperty(property, unserializedTheme[property]); 
});

Conclusioni

In questo articolo hai visto cosa siano e come utilizzare le proprietà personalizzate CSS.

Se vuoi puoi approfondire ulteriormente l’argomento alla pagina MDN “Using CSS custom properties (variables)”.

Seguimi su

Variabili CSS: come si dichiarano

Variabili CSS: come si usano

Variabili CSS: un esempio pratico

Articoli correlati

Conclusioni