我正在寻找一种根据body标签上的类使用特定颜色的方法。
我有一个像这样的主要scss文件
// variables.scss
$bg-main: white;
$color-first: red;
$color-second: green;
在其他文件中,我使用颜色
// content.scss
.content {
.some-selector: {
// some styles
color: $color-second;
}
a:hover {
// some styles
color: $color-second;
}
}
// and same goes for menu.scss etc.
现在,我在主体上有了一个动态类,该类随当前所选菜单而变化。我希望每个身体类别的$ color-second都不同,但我不知道该怎么做。我发现的唯一解决方案是将每个文件的所有$ color-second都移动到一个文件中,如下所示:
.body-1 {
.content a:hover, .content .some-selector {
color: green;
}
}
.body-2 {
.content a:hover, .content .some-selector {
color: blue;
}
}
.body-1 {
.content a:hover, .content .some-selector {
color: black;
}
}
所以我不需要在每个文件中写颜色。这很好用,但是如果我需要将此$ color-second设置为其他选择器,则需要将它放在这个大文件中。
是否可以通过其他方式做到这一点?
我已经检查了这些答案,但并没有太大帮助:
SASS set variable depending on CSS class
Creating or referencing variables dynamically in Sass
Merge string and variable to a variable with SASS
最佳答案
有多种方法可以做到这一点。我想到的最明显的两个是mixin和loops:
混合蛋白
只需将所需的所有内容放入单个mixin,然后将其用于每个身体类别:
@mixin colored-content($color) {
.content a:hover, .content .some-selector {
color: $color;
}
/* Any other rules which use $color here */
}
.body-1 {
@include colored-content(green);
}
.body-2 {
@include colored-content('#FF0000');
}
.body-3 {
@include colored-content(darken(red, 20));
}
您可以使用任意数量的参数(例如,
$textColor
和$bgColor
),条件或规则来扩展此示例。使用这种方法,您将不会重复SCSS代码,并且将轻松引入任何更新。
环
另一种方法是使用一个简单的循环:
$body_themes: (
"body-1": green,
"body-2": #FF0000,
"body-3": darken(red, 2)
);
@each $body_class, $color in $body_themes {
.#{$body_class} {
.content a:hover, .content .some-selector {
color: $color;
}
/* Any other rules which use $color here */
}
}
它甚至更短,但是恕我直言,它的可读性较差。
附言可以通过以下方式组合mixin和循环:)