Вывод переменной цикла стилуса в селекторе

Я пытаюсь использовать цикл for для создания селекторов и свойств, но он не работает. Вот мой код:

colours = cola lychee lemonade tonic cherry ginger pineapple lemon lime elderflower cream-soda cream-soda-diet blackberry blueberry grape tropical raspberry 
cola = #1f2023
lychee = #9ca6b1
lemonade = #e0e5ed
tonic = #f8f9fa
cherry = #f7362b
ginger = #f79945
pineapple = #ffad00
lemon = #f5d600
lime = #6ecc54
elderflower = #4acccf
cream-soda = #00abff
cream-soda-diet = #F2FBFF
blackberry = #45388c
blueberry = #8f78e8
grape = #663da6
tropical = #cc78d1
raspberry = #fc007a
bubblegum = #f78cbf

button
    for colour in colours
        &.{colour}
            background colour

Я хочу, чтобы он выводил что-то вроде этого:

button.cola {
    background: #1f2023;
}
button.lychee {
    background: #9ca6b1
}
...

person geoffs3310    schedule 10.10.2018    source источник


Ответы (1)


Здесь можно использовать хэши Stylus.

colours = {
  cola: #1f2023
  lychee: #9ca6b1
  lemonade: #e0e5ed
  tonic: #f8f9fa
  cherry: #f7362b
  // etc
}

button
    for colour, value in colours
        &.{colour}
            background value

генерирует искомый результат.

person dinocarl    schedule 13.10.2018