@Gregory: You cannot emulate CSS variables with a preprocessor, they’re dynamic. You can change their value with JS and have it update in every place using the variable automatically. Not to mention that they inherit like all other CSS properties instead of being lexically scoped like they are in preprocessors.

I think there is a major benefit to being able to change things client side via css variables. To allow for dynamic changes and customization to what the user views, if desired. Much of this can be done via javascript, but doing it via javascript also can produce a lot of code that requires a higher maintenance. It would be much simpler from the web application developer standpoint to have code change a small handful of variables instead of code that manipulates a broad domain of css selectors or classes. Again, this vantage point applies to client-side changes, not pre-compiling/server-side generation.

Sass is good but: Once it's compiled, there's no easy way to modify it at client-side. It's *extremely* important when we write animations using javascript.If we have CSS Variables, we only need to modify the variables' value, rather than every element's inline style refers to the changed style.

Honestly, I think this is something best left to pre-processors. I don’t want the browser to have the overhead of having to process the CSS in this way. Also, there is no fallback for older browsers that don’t support variables.