Стилус: итерация нескольких селекторов для одного правила

Question

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

Я сделал поиск, но не нашел подобного примера в документации.

Я пытался с помощью следующего кода:

for num in (1..6)
  .foo-{num}
    color #dfd

Но получите несколько правил тоже.

Я хотел бы добиться следующего:

.foo-1,
.foo-2,
.foo-3,
.foo-4,
.foo-5,
.foo-6 {
  color: #dfd;
}

Answer 1

join(range)
  str = ''
  for n in range
    str += ',.foo-' + n

{join(1..5)}
  color: #dfd

http://stylus-lang.com/docs/iteration.html

РЕДАКТИРОВАТЬ: решение проблемы, указанной в комментарии

multisize(sizes, before, after)
  str = ''
  for size in sizes
    str += before + size + after + ','

{multisize(xs sm lg, 'cs.btn-', '.btn-blue:hover')}
  color: #dfd

Answer 2

Если вы используете @extend Вы получаете селекторы, разделенные запятой, вы можете использовать селектор-заполнитель для правил:

стилус

$rules
  color #dfd

for num in (1..6)
  .foo-{num}
    @extend $rules

Выход

.foo-1,
.foo-2,
.foo-3,
.foo-4,
.foo-5,
.foo-6 {
  color: #dfd;
}

Answer 3

Этого также можно добиться с помощью +cache(key), где key уникальная строка

      for num in (1..6)
  .foo-{num}
    +cache('foo')
      color #f00

      .foo-1,
.foo-2,
.foo-3,
.foo-4,
.foo-5,
.foo-6 {
  color: #f00;
}