我正在创建一个在三个(或更多)不同上下文中使用的Web应用程序,我希望每个上下文都有不同的配色方案。但是,当所有变化都是颜色时,我通常不想维护三种不同的样式表。
例如,假设主题是红色,蓝色和橙色。我的一个样式表描述了链接颜色:
a {
color: $some_color;
}
我想根据应用于正文的类来拆分它:
body.style1 {
a {
color: $red;
}
}
body.style2 {
a {
color: $blue;
}
}
body.style3 {
a {
color: $orange;
}
}
如果你要改变很多元素的风格,你可以很快看到它变得笨拙。有没有办法更像这样做?
a {
&closest:body.style1 {
color: $red
}
&closest:body.style2 {
color: $blue;
}
&closest:body.style3 {
color: $orange;
}
}
这样我就能以更清晰,更易于维护的方式编写我的scss代码。
答案 0 :(得分:0)
我更喜欢。定义像body-style
:
@mixin body-style($style, $map) {
body.#{$style} & {
@each $property, $value in $map {
#{$property}: $value;
}
}
}
然后通过将$ style作为body的样式类和$ map作为css键和值的映射来传递给每个标记。
a {
@include body-style(style1, (
color: red,
background: white
)
);
}
它将返回:
body.style1 a {
color: red;
background: white;
}
答案 1 :(得分:0)
看起来你不必首先拥有&
,所以这是有效的(至少在3.2.10中):
a {
body.style1 & {
color: $red
}
body.style2 & {
color: $blue;
}
body.style3 &{
color: $orange;
}
}