Please note that CSS Variables are not like SASS/LESS variables. They're actually custom properties that obey inheritance.
They're scoped to document rather than stylesheet, so you can override them in parts of the document just like you can override any CSS property.
Example from the spec:
:root { var-color: blue; }
div { var-color: green; }
#alert { var-color: red; }
* { color: var(color); }
<p>I inherited blue from the root element!</p>
<div>I got green set directly on me!</div>
<div id='alert'>
While I got red set directly on me!
<p>I’m red too, because of inheritance!</p>
</div>
This is a fantastic feature, and something that preprocessors like SASS/LESS cannot do without complicated workarounds.
There are often times in my CSS workflow where I want to do something similar to this:
.widget
$padding: 3px
$activeColor: $color1
$inactiveColor: $color2
padding: $padding
/* ... etc. */
.subWidget
$padding: 6px
.subWidget2
$inactiveColor: $color3
/* ... and so on */
With preprocessors, this doesn't work - you're better off defining a mixin that you feed variables into, which isn't the most intuitive approach. I hope this is adopted quickly by the major browser vendors. Unfortunately, writing your styles in this way will completely break in browsers that don't support it, in the absence of some sort of polyfilling JS or build tool.
This sounds like a bit of an anti-feature to me. It might encourage a practice that makes it very difficult to tell what styles will be applied to an element without inspecting it in the DOM. I've been thinking about how to code for maximum grepability recently and this is at odds with that.
I also hoped for a macro style color function that just text-replaces all occurrences of color: hackernews with #ff6600 when you define hackernews as def: hackernews, #ff6600; That would allow total mumbo jumbo style CSS-Sheets that look like Java or C++, if the authors would go that crazy..
However, I think that just copying how mixins and variables work in SCSS work into the CSS4 spec would do wonders. I'm 100% for it
They're scoped to document rather than stylesheet, so you can override them in parts of the document just like you can override any CSS property.
Example from the spec: