Sassの「@at-root
」と「#{&}
」を利用することで、記述した上のclass名を参照しつつも、下のclass名を上と同じ位置にするということができます。・・・とてもややこしいですね。
実際の展開例をご紹介します。
@at-rootは利用しない.scss ファイル
.sample { color: blue; #{&}-test { color: red; } }
↓こちらを展開すると下記のようになります。
.css ファイル
.sample{color:blue} .sample .sample-test{color:red}
@at-rootを利用した .scss ファイル
.sample2 { color: blue; @at-root { #{&}-test { color: red; } } }
↓こちらを展開すると下記のようになります。
.sample2{color:blue} .sample2-test{color:red}