我有一组带颜色的类列表,希望在mixin中使用定义好的颜色设置不同的属性(如color
、background
、border-color
等)。
例子
colorHome = #FFF
colorParam = #999
colorDash = #000
links = {
'home': colorHome,
'param': colorParam,
'dash': colorDash
}
.dashboard-menu li
border 1px solid
+addLinks()
color clr
background clr
border-color clr
would output to
.dashboard-menu li {
border: 1px solid;
}
.dashboard-menu li.home {
color: #fff;
background: #fff;
border-color: #fff;
}
.dashboard-menu li.param {
color: #999;
background: #999;
border-color: #999;
}
.dashboard-menu li.dash {
color: #000;
background: #000;
border-color: #000;
}
我现在有一个使用块的混合器。
addLinks()
for key, value in links
clr = value
&.{key}
{block}
.dashboard-menu li
border 1px solid
+addLinks()
color clr
background clr
border-color clr
但出于某种原因,clr
被设置为背景和边框颜色的第一个颜色(colorHome / #FFF),并且被设置为最后一个颜色(colorDash / #000)的文字颜色。
输出
.dashboard-menu li {
border: 1px solid;
}
.dashboard-menu li.home {
color: #000;
background: #fff;
border-color: #fff;
}
.dashboard-menu li.param {
color: #000;
background: #fff;
border-color: #fff;
}
.dashboard-menu li.dash {
color: #000;
background: #fff;
border-color: #fff;
}
考虑到块级mixin比较新,它们能够实现我想要的吗?还是应该考虑使用完全不同的解决方案?
谢谢。