有什么方法可以根据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 ..
}
关于css - 动态Sass变量,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/14552529/