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

#{&}のように記述することで、親クラス名を引っ張ってきて小クラス名をつけることもできます。

.scss ファイル

.sample {
  #{&}Child {
    background:red;
  }
}

↓ これを展開すると下記のように#{&}.sampleとして、記述されます。

.css ファイル

.sample .sampleChild {
  background: red;
}

ここでの注意点は#{&}で固まりとして利用することです。id(#)かclass(.)かの設定は親に依存しており、自動で展開されます。

たとえば以下のように記述すると#sampleが付きます。

#sample {
  #{&}Child {
    background:red;
  }
}

#sample #sampleChild {
  background: red;
}