以下のようなスタイルシートがあります。
.a .b .c .d .e
の中の文字は赤色ですが、
.a .b.active .c .d .e
とbにactiveが付与された時のみ青色になります。
ですがこの書き方ですと.a .b
と.c .d .e
の記述が重複してしまっています。
.a .b{
.c .d .e{
color:red;
}
}
.a .b.active{
.c .d .e{
color:blue;
}
}
以下のように、パスの指定を一箇所に纏めるにはどうしたら良いでしょうか?
(この例では.eがactiveになった場合という意味になってしまうので間違っています)
.a .b{
.c .d .e{
color:red;
&.active{
color:blue;
}
}
}
以下のようにアンパサンドやらat-rootを使って近い所までは行けたのですが、ここから先が分からない状態です。
.a .b{
$x: &;
.c .d .e{
color:red;
@at-root #{$x}.active & {
color:blue;
}
}
}
/* ↓ css変換後 */
.a .b .c .d .e {
color: red;
}
.a .b.active .a .b .c .d .e { // ←惜しい。 .a .b.active .c .d .e が理想
color: blue;
}
sassの確認は以下のサイトで行いました。
https://www.sassmeister.com/