How to make a loop that creates multiple classes in Stylus?

Question

css

I need to get this:

.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;
}

How to do this in Stylus with a loop?
Tried like this:

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

But it gives an error. I searched in the documentation, but did not understand how it is syntactically correct to do this and is it possible at all or not?

Answer 1

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 is optional, but for the sake of code readability and to avoid conflicts, it is still better to set a parent for names such as .col-n