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

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

.scss ファイル

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

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

.css ファイル

.sample .sampleChild {
  background: red;
}

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

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

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

↓

#sample #sampleChild {
  background: red;
}