我有一个SASS mixin设置循环显示一组颜色,并在主体具有特定数据颜色时将它们应用于特定元素 . 这一切都很好,但我很想知道如果你也可以使用变量作为颜色,而不是使用'蓝色,绿色,红色,紫色,橙色'; '$ blue,$ green,$ red'等具有不同的十六进制值 .
有什么建议?
我现在有这个......
$blue: #003fb8;
$green: #005f30;
$red: #fe5053;
$purple: #5f0d82;
$orange: #ff6d00;
@mixin coloured-elements($color) {
a:hover,
a.site-title,
nav.main ul li.active a,
.projects--layout .project h3 {
color: $color;
}
}
$colors_names: blue, green, red, purple, orange;
$colors_variables: $blue, $green, $red, $purple, $orange;
@each $color in $colors_variables {
body[data-colour="#{$color}"] {
@include coloured-elements($color);
}
}
哪个输出如下......但是如何使用$ colors_name作为数据属性而不是十六进制值?
body[data-colour="#003fb8"] a:hover,
body[data-colour="#003fb8"] a.site-title,
body[data-colour="#003fb8"] nav.main ul li.active a,
body[data-colour="#003fb8"] .projects--layout .project h3 {
color: #003fb8;
}
body[data-colour="#005f30"] a:hover,
body[data-colour="#005f30"] a.site-title,
body[data-colour="#005f30"] nav.main ul li.active a,
body[data-colour="#005f30"] .projects--layout .project h3 {
color: #005f30;
}
body[data-colour="#fe5053"] a:hover,
body[data-colour="#fe5053"] a.site-title,
body[data-colour="#fe5053"] nav.main ul li.active a,
body[data-colour="#fe5053"] .projects--layout .project h3 {
color: #fe5053;
}
body[data-colour="#5f0d82"] a:hover,
body[data-colour="#5f0d82"] a.site-title,
body[data-colour="#5f0d82"] nav.main ul li.active a,
body[data-colour="#5f0d82"] .projects--layout .project h3 {
color: #5f0d82;
}
body[data-colour="#ff6d00"] a:hover,
body[data-colour="#ff6d00"] a.site-title,
body[data-colour="#ff6d00"] nav.main ul li.active a,
body[data-colour="#ff6d00"] .projects--layout .project h3 {
color: #ff6d00;
}
1 回答
我相信这就是你要找的东西 . 存储在变量上的键值 .
这将转化为