Come posso definire i colori come variabili nei CSS?

Sto lavorando a un file CSS che è piuttosto lungo. So che il cliente potrebbe chiedere modifiche alla combinazione di colori, e mi chiedevo: è possibile assegnare i colori alle variabili, così posso semplicemente cambiare una variabile per avere il nuovo colore applicato a tutti gli elementi che lo usano?

Nota che non posso usare PHP per cambiare dinamicamente il file CSS.

CSS supporta questo nativamente con variabili CSS .

Esempio di file CSS

:root {
    --main-color:#06c;
}

#foo {
    color: var(--main-color);
}

Per un esempio funzionante, vedere questo JSFiddle (l'esempio mostra che uno dei selettori CSS nel violino ha il colore hard coded to blue, l'altro selettore CSS utilizza le variabili CSS, sia la sintassi originale che quella corrente, per impostare il colore su blue) .

Manipolazione di una variabile CSS in JavaScript / lato client

document.body.style.setProperty('--main-color',"#6c0")

Il supporto è in tutti i browser moderni

Firefox 31+ , Chrome 49+ , Safari 9.1+ , Microsoft Edge 15+ e Opera 36+ vengono forniti con supporto nativo per le variabili CSS.