css – 在Stylus中包含变量的循环

我想制作一个按钮颜色的mixin.我的目标是迭代值列表(绿色,红色,蓝色),然后构建类名,然后将正确的变量颜色应用于背景.

我成功地做到了这一点：

green = #38ab0b
red = #ab130b
blue = #099aab

colors = green, red, blue

for color, i in colors
  .btn-{color}
    background: mix(color, white, 60%)
    &:hover
      background: lookup(color)

然而,这表示为：

.btn-color {
  background: ;
}
.btn-color:hover {
  background: #008000;
}
.btn-color {
  background: ;
}
.btn-color:hover {
  background: #f00;
}
.btn-color {
  background: ;
}
.btn-color:hover {
  background: #00f;
}

这个example类似于我想要做的事情,除了它不需要变量是否有办法我可以实现我想要的东西,我知道如何在SCSS中做到这一点,但我正在尝试进行切换.

编辑：

我尝试了以下但无法使其工作.背景很好,但类名不生成.

$green = #38ab0b
$red = #ab130b

colors = green $green, red $red

for pair in colors
  .btn-{pair[0]}
    background: pair[1]

您的示例不起作用,因为绿色,红色和蓝色已经是颜色(具有rgba值的节点).要修复它,您可以使用字符串作为列表中的键：

$green = #38ab0b
$red = #ab130b

colors = 'green' $green, 'red' $red

for pair in colors
  .btn-{pair[0]}
    background: pair[1]

你也可以使用哈希(更好的方法来完成这项任务)：

colors = {
  green: #38ab0b
  red: #ab130b
  blue: #099aab
}

for name, color in colors
  .btn-{name}
    background: mix(color, white, 60%)
    &:hover
      background: color