Stylus 中带有变量的循环答案

【问题标题】：Loops with variables in StylusStylus 中带有变量的循环
【发布时间】：2015-02-03 06:18:06
【问题描述】：

我想为按钮颜色制作一个 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]

【问题讨论】：

标签： css loops stylus

【解决方案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

【讨论】：