0
我有一个SASS mixin设置为循环访问一组颜色,并在主体具有特定数据颜色时将其应用于特定元素。这一切都工作正常,但我很想知道,如果你也可以使用变量作为颜色,而不是使用'蓝色,绿色,红色,紫色,橙色' '$蓝色,$绿色,$红色'等有不同的十六进制值。SASS在@each循环中包含变量
有什么建议吗?
我有这个目前...
$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;
}
我认为这是你在找什么http://stackoverflow.com/questions/16083292/sass-scss-object-key-value-loop –