Sassの「&」を有効活用しよう!内から参照するだけでなく、もっと使える!

こんにちは。Sassつかってますか?

SassはCSSを構造的に書くことができ、スタイルの使い回しや、カラーコードの変数化などCSS記述を効率的にしてくれる仕組みです。

Sassのご紹介については以前書いた記事を参考にどうぞ。

&ってつかってます?

Sassをすでに導入済みのかた、もちろん&つかってますよね?
&は子から親のセレクタを参照できるものです。

.test{
     a{
          color: black;
          &:hover{
               color: white;
          }
     }
}

こんな風に記載すると、

.test a {
  color: black;
}
.test a:hover {
  color: white;
}

このようにコンパイルされます。

&は真ん中でも使えるよ!

&はすぐ親のセレクタを参照するものですが、さらにその上まで指定して使うこともできます。

.test{
     a{
          color: black;
          .parent &:hover{
               color: white;
          }
     }
}

これをコンパイルすると、

.test a {
  color: black;
}
.parent .test a:hover {
  color: white;
}

こんな感じです。
本当は共通化しておきたいけど、上位のセレクタに左右されちゃうという場合、使う場面がでてくるかもしれませんね。

まとめ

SassはCSSで普通に記述しても問題ないため、知っている技術だけの利用でいいのが気軽でいいですよね。
しかし、やはり良い使い方は知っておくべきですね!

「&」は非常に強力なツール!としてご紹介されておりましたので、以下ページ是非見てみてくださいね〜。

How to use & to simplify your Sass | Sparkbox | Web Design and Development

フォローして続編をチェック

@universionsをフォロー