Sassで入れ子にしないで複数の子要素を指定する
追記(2014-07-16):
Sass v3.4.0からselector-nest
関数が実装され、標準で本記事と同じようなことが出来るようになります。
タイトル見てもよく分からないと思うので次のコードを見てください。
a { &.hoge, &.foo, &.bar { color: #000; } }
↑みたく、同じ親に対して複数の子要素を指定する場合があると思います。 無駄にインデントが一段増えて気持ち悪いですね!
a (.hoge, .foo, .bar) { color: #000; }
こんな感じに書けたら最高なんだけど現状無理なので、@mixinか@functionで書いてる人いないかなと調べてみたら、普通にCompassにnest関数として実装されていて絶望した。全然知りませんでした。。
でもこれ、毎回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; }