Петли с переменными в 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; 
} 

Этот example похож на то, что я хотел сделать, кроме как не требует переменных есть способ, которым я могу достичь того, чего я хочу, я знаю, как это сделать в SCSS, но я пытаюсь сделать этот переключатель.

EDIT:

Я попытался следующие, но не могу заставить его работать. Фон хорош, но имя класса не генерируется.

$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