Стилус, см. имя и значение переменной

Я хочу...

Я пытаюсь сделать цикл, как это

my-red = #fcc
my-blue = #ccf

for color in my-red, my-blue
  .{color}
    color x

Я хочу, чтобы он выводился

.my-blue {
  color: #ccf;
}
.my-red {
  color: #fcc;
}

Кажется, я не могу получить как имя переменной, так и значение по мере необходимости

Я пытался...

my-blue = #ccf
my-red = #fcc

for x in 'my-blue' my-red
  .{x}
    color x

Но я просто получаю либо имя класса, либо имя цвета (в зависимости от того, использую ли я строку в качестве имени переменной для итерации)

.my-blue {
  color: "my-blue";
}
. {
  color: #fcc;
}

stylus
person Billy Moon    schedule 04.09.2012    source источник

Ответы (1)


arrow_upward
16
arrow_downward

Вы можете использовать массив для такой задачи, поэтому вы можете сделать это:

my-colors = my-red  #fcc,
            my-blue #ccf

for pair in my-colors
  .{pair[0]}
    color pair[1]

При этом вы объявляете массив my-colors, а затем перебираете его, используя первые элементы в парах в качестве имен, а вторые — в качестве значения.

person kizu    schedule 19.10.2012
comment
Спасибо, но я не могу заставить его работать на тестовой странице стилуса: learnboost.github .com/stylus/try.html - person Billy Moon; 20.10.2012
comment
Эта тестовая страница имеет несколько старую версию стилуса, она не позволяет объявлять многострочные переменные. Так что просто замените первые строки моего фрагмента на my-colors = my-red #fcc, my-blue #ccf, и вы увидите, что это сработает. И фактическая основная ветка (или текущая версия в npm) должна отображать это без каких-либо изменений. - person kizu; 20.10.2012
comment
это сработало! Большое спасибо за то, что вы поняли это спустя много времени после того, как я задал вопрос. - person Billy Moon; 20.10.2012