Как на SCSS сгенерировать классы?

Question

[uRoot]

Я хочу сгенерировать классы вида: .mb-1, .mb-2, .mb-3 и т.д.
Где .mb-1 { margin-bottom: 1px; } .mb-2 { margin-bottom: 2px; } .mb-3 { margin-bottom: 3px; } и т.д.
А потом также для margin-top по аналогии. Не подскажите как это сделать? Я когда-то делал, но давно не использовал SCSS и забыл. Я остановился на

@for $i from 1 through 12 {
    .mb-#{$i} { margin-bottom: $i; }
  }

Но это не работает.

Answer 1

[Юрий]

Пиксели забыли:

@for $i from 1 through 12 {
    .mb-#{$i} {
        margin-bottom: #{$i}px;
    }
}