SCSS设计系统主题Mixin多选择器编译异常求助

问题分析 #

你的主题Mixin在单选择器嵌套场景下运行正常，但遇到多选择器（如h2, label）的嵌套结构时，主题类（.light-mode等）只会被添加到第一个选择器前，导致其他选择器未关联主题上下文。这是因为#{&}会直接展开为完整的多选择器字符串，@at-root仅会在整个字符串的最前方添加主题类，而非为每个选择器单独添加前缀。

解决方案 #

修改Mixin，通过遍历&拆分出每个独立选择器，为每个选择器单独添加主题类前缀：

@mixin theme($category, $token, $property, $state: false) {
  @each $theme-name, $theme-map in $themes {
    $value: getthemevalue($category, $token, $theme-name);
    
    // 遍历当前嵌套的每一个选择器
    @each $selector in & {
      @at-root .#{$theme-name} #{$selector} {
        #{$property}: map-get($color-tokens, $value);
      }
    }
  }
}

原理说明 #

• SCSS中&在多选择器场景下会被解析为选择器列表，通过@each $selector in &可以逐个取出每个独立选择器（如.header h2和.header label）。
• 对每个选择器单独执行@at-root .#{$theme-name} #{$selector}，确保主题类被添加到每个选择器的最前方，最终生成的CSS中所有选择器都会关联主题父类。

效果验证 #

使用你提供的嵌套代码：

.header {
    h2, label {
       @include theme(color, text-primary, color);
    }
}

编译后会生成符合预期的CSS：

.light-mode .header h2 { color: #...; }
.light-mode .header label { color: #...; }
// 其他主题模式同理

内容的提问来源于stack exchange，提问作者Twinkle