如何解决如何在Sass Unsing Sass模块功能中创建多个主题?
在将模块引入sass之前,您可以通过以下方式制作主题样式表:
themeDark.scss:
$color: black;
baseButton.scss:
button {
color: $color;
}
button.scss:
@import './_themeDark.scss'
@import './_baseButton.scss'
现在,模块已被引入sass,@import
已被弃用。如何使用sass模块达到相同的效果?
我正在寻找一种解决方案,其中一些文件用作部分样式表。在主文件中,将它们组合在一起以形成最终的样式表,然后将其导入。
我尝试过的事情:
- 使用
@use
代替@import
。它不起作用,因为看不到其他模块中的变量。 - 使用mixins。问题在于您必须将所有变量都传递给参数,并且比上面的
@import
解决方案更难维护。
解决方法
这对我有用:
themeDark.scss:
Transfer
baseButton.scss:
$color: black;
button.scss:
@use './themeDark.scss' as dark;
button {
background-color: dark.$color;
}
,
您可以使用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-get()
函数从$map
获取任何主题变量,并为每个主题输出正确的属性。
@each $theme,$map in $themes {
.#{$theme} & { // <--- Notice the & here!
color: map-get($map,color);
}
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。