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

Question

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

主题Dark.scss：

$color: black;

基按钮.scss：

button {
  color: $color;
}

按钮.scss：

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

现在，模块被引入到 sass 中，@ @import已被弃用。 如何使用sass模块达到同样的效果？

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

我尝试过的：

• 使用@use而不是@import 。 它不起作用，因为看不到来自其他模块的变量。
• 使用混合。 问题是您必须通过参数传递所有变量，并且比上面使用@import的解决方案更难维护。

Answer 1

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

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

使用这个地图是一个@each循环。

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

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

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

您现在使用map-get()函数从$map获取任何主题变量并为每个主题输出正确的属性。

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

}