有人能帮我解决一个高级的scs问题吗

Question

.c-button {
$self: &;

&#{&}--outlined.primary {
color: yellow;
}

&#{&}--outlined.secondary {
color: red;
}
}

<button class="c-button c-button--outlined primary"><button>
<button class="c-button c-button--outlined secondary"><button>

正如您在上面的代码块中看到的那样，我可以根据自己的需要进行样式设置。然而，我想明确地执行它。我尝试过一种方法来实现更符合逻辑的东西，如下所示，但我做不到：(如果我的类选择器样式对你来说很奇怪，我可以说".c-button.c-button--oroughed"与"&#{&}-oroughled"相同

.c-button {
$self: &;

&#{&}--outlined[class*="."] {
.primary {
color: yellow;
}
.secondary {
color: red
}
}
}

有人能帮我吗？提前感谢您宝贵的时间和精力

Answer 1

这是我为您的案例编写的SCSS：

.c-button {
&#{&}--outlined {
&.primary {
color: yellow;
}
&.secondary {
color: red
}
}
}

它编译成

.c-button.c-button--outlined.primary {
color: yellow;
}
.c-button.c-button--outlined.secondary {
color: red;
}