Chrome – supporto alle variabili CSS

Chrome 49 avrà il supporto alle variabili CSS introducendo alcune alcune funzionalità già presenti in sass e less. Solamente Chrome 49, Firefox 43+, Safari 9.1 eiOS 9.3 supportano questo standard mentre non è ancora presente questa funzionalità in Microsoft Edge, Opera o Android rendendone l’utilizzo al momento impossibile per prodotti destinati al grande pubblico.

L’utilizzo è molto semplice, si dichiara una variabile preceduta da “–” e si utilizza richiamandola con la funzione var(custom-property-name [, declaration-value ]? ), come mostrato in questo esempio.

Si differenzia da sass e less poichè queste proprietà seguono lo standar delle cascade rule ed è quindi possibile ridefinire una variabile più volte all’interno dello stesso css

E’ possibile recuperare o settare il valore di una variabile anche da javascript con la funzione

Google Developers
CSS WG

Leave a Reply