#{&}
のように記述することで、親クラス名を引っ張ってきて小クラス名をつけることもできます。
.scss ファイル
.sample { #{&}Child { background:red; } }
↓ これを展開すると下記のように#{&}
は.sample
として、記述されます。
.css ファイル
.sample .sampleChild { background: red; }
ここでの注意点は#{&}
で固まりとして利用することです。id(#
)かclass(.
)かの設定は親に依存しており、自動で展開されます。
たとえば以下のように記述すると#sample
が付きます。
#sample { #{&}Child { background:red; } }
↓
#sample #sampleChild { background: red; }