在Stylus中使用变量循环

Question

我想制作一个按钮颜色的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;
}

这个例子类似,我想这样做,除了它不需要变量还有什么办法,我可以做到什么,我想,我知道该怎么做,在SCSS但我试图让开关.

编辑:

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

$green = #38ab0b
$red = #ab130b

colors = green $green, red $red

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

Answer 1

您的例子并不因为工作green,red并且blue已经颜色(与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