

以下のようなスタイルシートがあります。  
`.a .b .c .d .e`の中の文字は赤色ですが、  
`.a .b.active .c .d .e`とbにactiveが付与された時のみ青色になります。  
ですがこの書き方ですと`.a .b`と`.c .d .e`の記述が重複してしまっています。

[code]

    .a .b{
        .c .d .e{
            color:red;
        }
    }
    
    .a .b.active{
        .c .d .e{
            color:blue;
        }
    }
    
[/code]

以下のように、パスの指定を一箇所に纏めるにはどうしたら良いでしょうか？  
(この例では.eがactiveになった場合という意味になってしまうので間違っています)

[code]

    .a .b{
        .c .d .e{
            color:red;
            &.active{
               color:blue;
            }
        }
    }
    
[/code]

以下のようにアンパサンドやらat-rootを使って近い所までは行けたのですが、ここから先が分からない状態です。

[code]

    .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;
    }
    
[/code]

sassの確認は以下のサイトで行いました。  
<https://www.sassmeister.com/>


CC BY-SA 4.0
2022-03-24T17:24:46.047
88009
2022-06-05T10:50:41.153
2022-03-25T01:15:36.693
3060
805
question
css sass
scssで特定の親がある時だけ効くセレクタを書く方法


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

[code]

    .a .b{
        .c .d .e{
            color:red;
        }
        &.active .c .d .e{
            color:blue;
    
        }
    }
    
[/code]


CC BY-SA 4.0
2022-03-24T23:52:26.173
88010
2022-03-24T23:52:26.173
22665
88009
answer


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

[code]

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

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

[code]

    .a .b .c .d .e {
      color: red;
    }
    .a .b.active .c .d .e {
      color: blue;
    }
    
[/code]

* * *

## 追記

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

[code]

    $x:'.a .b';
    $y:'.c .d .e';
    
    #{$x} #{$y}{
        color:red;
    }
    
    #{$x}.active #{$y}{
        color:blue;
    }
    
[/code]

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


CC BY-SA 4.0
2022-06-05T10:35:15.583
89238
2022-06-05T10:50:41.153
2022-06-05T10:50:41.153
52932
52932
88009
answer