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;
}

这个example类似于我想要做的事情，除了它不需要变量有一种方法我可以实现我想要的，我知道如何在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

在Stylus中使用变量循环

1 个答案: