[ssafejava]

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.