SCSS 设计系统中的主题

Question

我正在 SCSS 中开发设计系统，并努力设置主题。 到目前为止，我在这个平台上的一个答案的帮助下取得了很多成就，但需要一些进一步的帮助。

我基于这个答案创建了一个主题混合，它使用这篇文章

@mixin theme($category, $token, $property, $state: false) {
  @each $theme-name, $theme-map in $themes {
    $value: getthemevalue($category, $token, $theme-name);

    @at-root .#{$theme-name} #{&} {
      #{$property}: #{map-get($color-tokens, $value)};
    }
  }
}

现在，这对于很多情况都非常有效，只有一个案例尚未得到处理。

.header {
    h2, label {
       @include mixin(...)
    }
}

编译生成的css是

.light-mode .header h2, .header label {color: ...}

我想要的是

.light-mode .header h2, .light-mode .header label {color: ...)

对于所有选择器，应该将主题作为父主题 但这还没有完成。

Answer 1

您需要稍微修改您的 mixin 函数，以便它适用于每个选择器。

例如：

@mixin theme($category, $token, $property, $state: false) {
  @each $theme-name, $theme-map in $themes {
    $value: getthemevalue($category, $token, $theme-name);

    @at-root (with: ".#{$theme-name}") {
      .#{$theme-name} #{&} {
        #{$property}: #{map-get($color-tokens, $value)};
      }
    }
  }
}

@at-root 与

with

选项：确保主题 (.light-mode) 类包装在每个选择器周围。