Css 如何使用sass模块功能在sass中创建多个主题？

在将模块引入sass之前，您可以通过以下方式制作主题样式表：

themeDark.scss：

baseButton.scss：

@import './_themeDark.scss'
@import './_baseButton.scss'

button.scss：

@import './_themeDark.scss'
@import './_baseButton.scss'

现在，模块被引入到sass中，

@import

正被弃用。如何使用sass模块实现相同的效果

我在寻找一个解决方案，其中一些文件被用作部分样式表。在主文件中，它们被组合成最终的样式表，将被导入

我所尝试的：

• 使用

  @use

  而不是

  @import

  。它不起作用，因为看不到来自其他模块的变量
• 使用混合器。问题是，您必须通过参数传递所有变量，而且与上面使用

  @import

  的解决方案相比，维护这些变量要困难得多

---

您可以使用scss映射来存储所有主题

$themes: (
  theme1: (color: red),
  theme2: (color: orange),
  theme3: (color: yellow),
  theme4: (color: green),
  theme5: (color: blue)
);

使用此映射时，每个循环都有一个

@循环

@each $theme, $map in $themes {
  .#{$theme} {
    color: map-get($map, color);
  }
}

在每个循环中，分别将这些值分配给
$theme
和
$map

$theme
-主题名称
$map
-所有主题变量的映射

现在，您可以使用
map-get（）
函数从
$map
中获取任何主题变量，并为每个主题输出正确的属性

@each $theme, $map in $themes {
  .#{$theme} & { // <--- Notice the & here!
    color: map-get($map, color);
  }

@每个$theme，$map在$themes中{
.#{$theme}&{//
@use目前仅由Dart Sass支持。我正在用Sass启动一个项目，我想使用这个新语法，但我遇到了与您解释的完全相同的问题。您能告诉我您是如何解决的吗？谢谢。@sevenlops现在我同时使用：
@use
和
@import
（仅适用于主题）一起使用。希望有人能找到一个在
@import
被弃用后仍然有效的解决方案。您是否能够使用CSS变量设置这些值，而不是使用Sass将它们烘焙到输出中？
@each $theme, $map in $themes {
  .#{$theme} & { // <--- Notice the & here!
    color: map-get($map, color);
  }