Как сделать цикл создающий несколько классов в Stylus?

Question

[someden]

Мне нужно получить это:

.col_1, .col_2, .col_3, .col_4, .col_5, .col_6, .col_7, .col_8, .col_9, .col_10, .col_11, .col_12 {
    position: relative;
    min-height: 1px;
    padding-left: 15px;
    padding-right: 15px;
}

Как в Stylus это сделать с помощью цикла?
Пробовал так:

for x in 1..12
    .col_{x}
position relative
min-height 1px
padding-left 15px
padding-right 15px

Но выдает ошибку. Искал в документации, но так и не понял как синтаксически верно это сделать и возможно это вообще или нет?

Answer 1

[Alexander Mischuk]

learnboost.github.io/stylus/docs/iteration.html

.column
  position relative
  min-height 1px
  padding-left 15px
  padding-right 15px

/* где .columns это родитель ваших .col-n */
.columns
  for num in 1..12
    .col-{num}
      @extend .column

.columns необязателен, но ради читабельности кода и во избежание конфликтов лучше всё же задавать родителя для таких названий, как .col-n

Comments

[someden]

Решение подходит, но не везде применимо.

Допустим нужно создать функцию, чтобы генерировать классы в зависимости от медиазапросов:

.column
  position relative
  min-height 1px
  padding-left 15px
  padding-right 15px

generate_grid_classes(columns, suffix)
    for x in columns..1
      .col_{suffix}_{x}
        @extend .column

media (min-width: 768px)
  generate_grid_classes(12, 'sm')

media (min-width: 1000px)
  generate_grid_classes(12, 'md')

media (min-width: 1200px)
  generate_grid_classes(12, 'lg')

В этом случае в медиазапросах будет пусто, так как все классы перенесутся к классу .column

Есть решение для такого случая?

[Alexander Mischuk]

По логике stylus правильно делает, что выдает такой код, потому что нет смысла создавать одинаковый extend для разных медиа-запросов.
Можно без extend, но я, честно говоря, не понимаю почему это срабатывает.

generate_grid_classes(columns, suffix)
  for x in columns..1
    .col_{suffix}_{x}
      position relative
      min-height 1px
      padding-left 15px
      padding-right 15px