La sintassi CSS è stata sempre molto minimale e questo non ha mai permesso di renderli manutenibili. Questa immanutenibilità alla lunga ha portato alla creazione di linguaggi basati su CSS, ma più evoluti come LESS e SASS che aggiungono molte funzionalità tra le quali quella di permettere la creazione di variabili riutilizzabili. Tuttavia, nelle ultime specifiche CSS questa funzionalità è stata aggiunta nativamente.
Adesso possiamo dichiarare una variabile all'interno del file dichiarandola all'interno di un selettore tramite la sintassi --nomevariabile. Successivamente possiamo utilizzarla all'interno di un altro selettore usando la parola chiave var come mostrato nell'esempio.

:root {
  --main-bg-color: #fff;
  --main-txt-color: #000;
}

.container {
    background-color: var(--main-bg-color);
    color: var(--main-txt-color);
}

In questo esempio definiamo le variabili main-bg-color e main-txt-color che definiscono rispettivamente il colore bianco e nero. successivamente le usiamo per impostare il colore di background e il colore del teto degli oggetti con classe container.