Utilizzare le variabili nei CSS

CSS è in continua evoluzione, e sta prendendo anche spunto dai più tradizionali linguaggi di programmazione.

Oggi vediamo come usare le variabili, per riutilizzare un determinato valore in tutto il documento.

Supponiamo di voler usare il font nero ovunque, tranne che nei componenti h1, dove vogliamo usare il rosso.

Potremmo fare una cosa del genere:

:root {
    --main-color: black;
    --h1-color: red;
}

h1 {
    color: var(--h1-color);
}

Prima abbiamo impostato dei valori validi per tutto il documento (:root).

Sotto abbiamo detto che il colore dei componenti h1 deve essere quello di --h1-color.

Ovviamente tutto ciò si può traslare su qualsiasi altra proprietà, e se creiamo i CSS da soli (senza l'uso di framework appositi) può essere molto comodo saper usare le variabili.

Enjoy!