sassの親セレクタの参照&(アンパサンド)についてちょっと理解できた。

CSSフレンズ夏祭りに行ってから、触発されてSassをもっとしっかり勉強しようと思った私です。こんにちは。今回、親セレクタについて理解足りなくてつまづいたのですが、なんとなくできてちょっとスッキリしたので晒そうかなと思います。

【お願い】当方、Sass初心者ゆえdisらないでね…。

いろいろ書いた履歴

こうしたかったcss

最初書いたSass

最初書いたSassが吐き出されたcss

ネストしかしてなかったせいで最初書いたSassはnav #mainNav a .menuになっている…。nav #mainNav a.menuになってほしかった。

そんな時に親セレクタ参照を使うそう!

&(アンパサンド)とは親セレクタの参照ができます。疑似クラスやセレクタの前後に書くことができます。

基本のネストしか使ってなかったのでちょっと感動。

「&」を使って希望通りのcssが吐き出されました。
囲ってたらセレクタの後にも「&」を入れれるんだなというのも感動しました。

まとめ

覚えたこと

  • 親セレクタ「&」について
  • Sass使っていかないと理解しないね。
  • Gistは便利
  • アンパサンドでアンパンサンドぽい甘い響き

なんで今までSass使ってなかったんだ…。
ということでもっと勉強して使っていこうと思います。

よかったらFollow me!w

投稿者プロフィール

466548
京都在住 印刷会社のWEBチームに生息している社畜WEB屋。
最近はデザインより構築やディレクションが多いです。
最近お酒はお休み中です。