变量在触控笔中的循环

Question

我想为按钮颜色制作混合。我的目标是遍历值列表（绿色，红色，蓝色），然后构建类名称，然后将正确的变量颜色应用于背景。

我已成功地走到这一步：

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

您的例子不工作，因为​​，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