sassの「&」の使い方メモ
sass の「&」の使い方でちょっとはまりそうになったのでメモ。
sassの&
には色んな使い方があります。
僕がよく使うのは :before
、:after
、:hover
みたいなやつですね。
.hoge{ &:before{ 〜〜 } }
ネストの前後を入れ替えることもできちゃいます。
.hoge{ .foo{ 〜 } .bar &{ 〜 } }
↓コンパイル後
.hoge .foo{ 〜 } .bar .hoge{ 〜 }
くっつけることは出来なかった
で、「特定のタグにだけクラスを付与した場合」を書こうとしたのですよ。
例えば.hoge
とa.hoge
を書こうとして下記のようにしましたが、これはコンパイルエラーになりました。
.hoge{ 〜 a&{ 〜 } }
変数展開#{}の方法があった
何か方法はないかと調べたら#{&}
という感じに変数展開の方法が使えるのですね。
こんな感じに書き換えました
.hoge{ 〜 a#{&}{ 〜 } }
変数展開の場合はネストが付いてしまいました。
.hoge{ 〜 } .hoge a.hoge{ 〜 }
結局普通に書くことに
結局普通に分けて書くことにしました。 何かいい方法ご存じの方がいたら教えてください。
.hoge{ 〜 } a.hoge{ 〜 }