1

以下のようなスタイルシートがあります。
.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/

2 件の回答 2

2

純粋にどこが並列でどこが条件かを考えれば以下のようになるかなと思います。

.a .b{
    .c .d .e{
        color:red;
    }
    &.active .c .d .e{
        color:blue;

    }
}
0

当方Less使いですが、試しに書いてみました。

.a .b{
    $x: &;
    $y:'.c .d .e';
    #{$y}{
        color:red;
        @at-root #{$x}.active #{$y} {
            color:blue;
        }
    }
}

同じ変換サイトで試したところ、出力は以下でした。そちらでもご確認ください。
https://www.sassmeister.com/

.a .b .c .d .e {
  color: red;
}
.a .b.active .c .d .e {
  color: blue;
}

追記

上の形は質問者様の途中成果に沿った形ですが、そもそも変数をお使いになるのであれば、

$x:'.a .b';
$y:'.c .d .e';

#{$x} #{$y}{
    color:red;
}

#{$x}.active #{$y}{
    color:blue;
}

とした方がまだ可読性が高いのではないかと。

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。