ダダめも

思いついたことをまとめる

sassの「&」の使い方メモ

sass の「&」の使い方でちょっとはまりそうになったのでメモ。

sassの&には色んな使い方があります。 僕がよく使うのは :before:after:hoverみたいなやつですね。

.hoge{
  &:before{
    〜〜
  }
}

ネストの前後を入れ替えることもできちゃいます。

.hoge{
  .foo{ 〜 }
  .bar &{}
}

コンパイル

.hoge .foo{}
.bar .hoge{}

くっつけることは出来なかった

で、「特定のタグにだけクラスを付与した場合」を書こうとしたのですよ。 例えば.hogea.hogeを書こうとして下記のようにしましたが、これはコンパイルエラーになりました。

.hoge{
  〜
  a&{ 〜 }
}

変数展開#{}の方法があった

何か方法はないかと調べたら#{&}という感じに変数展開の方法が使えるのですね。

html5experts.jp

こんな感じに書き換えました

.hoge{
  〜
  a#{&}{}
}

変数展開の場合はネストが付いてしまいました。

.hoge{}
.hoge a.hoge{}

結局普通に書くことに

結局普通に分けて書くことにしました。 何かいい方法ご存じの方がいたら教えてください。

.hoge{}
a.hoge{}

f:id:dada:20160305155512p:plain