[英]How to create multiple themes in sass unsing sass modules feature?
Before modules were introduced to sass, you could make a themed stylesheet this way:在将模块引入 sass 之前,您可以通过以下方式制作主题样式表:
themeDark.scss:主题Dark.scss:
$color: black;
baseButton.scss:基按钮.scss:
button {
color: $color;
}
button.scss:按钮.scss:
@import './_themeDark.scss'
@import './_baseButton.scss'
Now, modules were introduced to sass and @import
is getting deprecated.现在,模块被引入到 sass 中,@ @import
已被弃用。 How to achieve the same effect using sass modules?如何使用sass模块达到同样的效果?
Im looking for a solution, where some files are used as partial stylesheets.我正在寻找一种解决方案,其中一些文件用作部分样式表。 In the main file they are combined to form a final stylesheet that will be imported.在主文件中,它们组合在一起形成将被导入的最终样式表。
What i have tried:我尝试过的:
@use
instead of @import
.使用@use
而不是@import
。 It does not work, because variables from other modules are not seen.它不起作用,因为看不到来自其他模块的变量。@import
.问题是您必须通过参数传递所有变量,并且比上面使用@import
的解决方案更难维护。You can have scss map to store all themes您可以使用 scss 映射来存储所有主题
$themes: (
theme1: (color: red),
theme2: (color: orange),
theme3: (color: yellow),
theme4: (color: green),
theme5: (color: blue)
);
Using this map is with an @each
loop.使用这个地图是一个@each
循环。
@each $theme, $map in $themes {
.#{$theme} {
color: map-get($map, color);
}
}
On each loop, assign these values to $theme
and $map
respectively.在每个循环中,将这些值分别分配给$theme
和$map
。
$theme
- Theme name $map
- Map of all theme variables $theme
- 主题名称$map
- 所有主题变量的$map
You now use the map-get()
function to get any theme variable from $map
and output the correct property for each theme.您现在使用map-get()
函数从$map
获取任何主题变量并为每个主题输出正确的属性。
@each $theme, $map in $themes {
.#{$theme} & { // <--- Notice the & here!
color: map-get($map, color);
}
} }
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.