有什么方法可以根据html元素上的类设置颜色变量?还是通过其他方式实现这一目标?
html { &.sunrise { $accent: #37CCBD; $base: #3E4653; $flat: #eceef1; } &.moonlight { $accent: #18c; $base: #2a2a2a; $flat: #f0f0f0; } }
这是基本主题。您可能想使用mixin或包含一个CSS文件中的多个主题。这是使用包括以下内容的方法:
_theme.scss
section.accent { background: $accent; } .foo { border: $base; } .bar { color: $flat; }
main.scss
html { &.sunrise { $accent: #37CCBD; $base: #3E4653; $flat: #eceef1; @import "theme"; } &.moonlight { $accent: #18c; $base: #2a2a2a; $flat: #f0f0f0; @import "theme"; } }
您可以轻松地制作一个混合色,它使用3种颜色作为其参数来代替include:
@mixin theme($accent, $base, $flat) { // .. do stuff .. }