SASSにはCSSを効率よく書くための色々な機能があります。

今回は『&』記号についてお話していこうと思います。

SASSではセレクタを入れ子で書いていくことができます。

でも、入れ子で書けるのは子孫セレクタの場合だけではありません。

あるセレクタの擬似要素（:hover等）を書きたい場合も入れ子で書けたら便利ですね。

そこで『&』の登場です！

よく使う書き方として、以下のような書き方があります。

.box{
  width: 100px;
  height: 200px;

  &:hover{
    opacity: 0.5;
  }
}

以下、出力結果です。

.box {
  width: 100px;
  height: 200px;
}
.box:hover {
  opacity: 0.5;
}

この『&』には「親セレクタをその場所に持ってくる」という機能があります。

他の擬似要素、:before、:after等にも使えますね！

擬似要素以外では、以下のような使い方もできます。

この例では、.boxの直下の階層にある.box-child要素を指定します。

.box{
  width: 100px;
  height: 200px;

  & > .box-child{
    width: 20px;
    height: 15px;
  }
}

.box {
  width: 100px;
  height: 200px;
}
.box > .box-child {
  width: 20px;
  height: 15px;
}

このように、親セレクタを『&』で書くことで、子孫セレクタ以外でも入れ子で書くことができますので、非常に便利です！

さらにこの『&』は、以下のようにセレクタの後にも記述できます。

.box{
  width: 100px;
  height: 200px;

  body.home &{
    width: 20px;
    height: 15px;
  }
}

.box {
  width: 100px;
  height: 200px;
}
body.home .box {
  width: 20px;
  height: 15px;
}

こういった書き方もできるので、ページ単位でデザインを変えたい場合などに使えます。

慣れてくると多用したくなる機能なので、『&』はもっと早く勉強しておけばよかったなと思っている今日この頃です(^^;;