Sassで入れ子にしないで複数の子要素を指定する

追記(2014-07-16):
Sass v3.4.0からselector-nest関数が実装され、標準で本記事と同じようなことが出来るようになります。

タイトル見てもよく分からないと思うので次のコードを見てください。

a {
  &.hoge, &.foo, &.bar {
    color: #000;
  }
}

↑みたく、同じ親に対して複数の子要素を指定する場合があると思います。 無駄にインデントが一段増えて気持ち悪いですね!

a (.hoge, .foo, .bar) {
  color: #000;
}

こんな感じに書けたら最高なんだけど現状無理なので、@mixin@functionで書いてる人いないかなと調べてみたら、普通にCompassnest関数として実装されていて絶望した。全然知りませんでした。。

でもこれ、毎回interpolation(#{$var})で書かないといけなくて気持ち悪いので、ラップして@mixinにしてみたコードが↓です。

@mixin nest($args...) {
  #{nest($args...)} {
    @content;
  }
}

// function
#{nest("a", ".hoge, .foo, .bar")} {
  color: #000;
}

// mixin
@include nest("a", ".hoge, .foo, .bar") {
  color: #000;
}