I would not use Variables whether Sass or CSS custom properite, unless I can force team mates to use them

I believe that native CSS variables are going to revolutionize the styling industry. The only thing holding us back is IE and Edge. We must accept that IE 11 will never support them, and Windows has stated that IE 11 will be around for as long as they support Windows 10.

"Internet Explorer 11 is the last version of Internet Explorer, and will continue to receive security updates, compatibility fixes, and technical support on Windows 7, Windows 8.1, and Windows 10."

I also believe that CSS preprocessors like SCSS, Less, and Stylus are going to continue to exist as well. Mainly because of functions, mixins, and partials. However, there is no need to fret, because preprocessors can still use native CSS variables. I created a quick Codepen illustrating the uses of CSS variables. If you have a 4K monitor without scaling, you'll be able to see the desired effect. The fantastic thing about CSS variables is that they are compiled at runtime. That means that if you change a CSS variable in JavaScript, it'll cascade in real-time.

Here is another fun Codepen that uses RxJS, RxCSS, and native CSS variables.

You can use PostCSS + CSSNext + Import plugin, which replaces preprocessors right now. Without that I wouldn't recommend to use CSS variables because of browser support, so you should transpile your new CSS to the old CSS3.

I am already using it. There are no much difference. Your code just now is a plain CSS and later you will be able to use it without changing anything. It is also much faster then using python or something to build sass.

I've been using JavaScript variables in my CSS via EQCSS for kind of the same effect, except that the EQCSS.js plugin is supported in all browsers IE8 and up - so I'm using neither preprocessors nor CSS variables, but stuff you can use today.

Preprocessors can only get you halfway there, no matter which one you use, and how much you use it. In 2016 it's totally feasible to write a little HTML, a little CSS, and a little JS and get the job done!

Here are a few demos of using JavaScript variables in CSS for a lot of the same functionality/benefit of CSS Variables (and I'd argue even more value):

• Faking CSS Variables with EQCSS: http://codepen.io/tomhodgins/pen/WGmgdk

• Here's a more basic example of using JavaScript variables in CSS: http://elementqueries.com/demos/variables.html

• Here I've used them in a similar way to how preprocessor variables get used - I store numbers and values to repeat in my CSS one time in Js so I can change them easily: http://codepen.io/tomhodgins/pen/zqRoBd

• Here's a WIP of something I built for a client where the colour palette used in CSS matches the colours we send to Google Charts for the graphs. I defined the palette once with each named color as a JavaScript variable and could then use this palette in JS and CSS: http://staticresource.com/reports.html

• And here's a more advanced example - instead of just a variable, I can also pull in an array of selectors and use them as a selector list in CSS, I can also use the value returned by a function to loop over that array and add :hover or :focus to the selectors it returns: http://codepen.io/tomhodgins/pen/KgwVOR

If you really wanna go off the deep end and see what live frontend variables can do that backend variables can't hope to do, check out the big list of eval("") demos for EQCSS and imagine what you can do with CSS Variables + JS once they get enough browser support to use them. Or what you can do with EQCSS in all browsers already ➳ github.com/eqcss/eqcss/issues/38

We have used css variables/cssnext using postcss until browsers support variables out-of-the-box.