Skip to main content
本文に 205 文字追加
ソース リンク

当方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;
}

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

当方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;
}

当方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;
}

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

ソース リンク

当方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;
}