Sassの「&」を利用して親クラスを便利に参照する(1)

Sassのファイルで利用する「&」はこれまで主に下記のように親クラスと繋ぐ役割として利用してきたのですが、親クラスの代わりとして実はもっと様々なことに利用できるようです。

今回は代表的なセレクタの連結として利用する方法を紹介します。

.scss ファイル

.sample1 {
  &:hover {
  font-weight:bold;
  }
}

↓ これを展開すると下記のように親セレクタに繋げて記述されます。

.css ファイル

.sample1:hover {
  font-weight:bold;
}