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