Sass: Generate classes dynamically

$base-unit: 4;

@for $i from 1 through 6 {
  .mb-#{$i} { margin-bottom: #{$i * $base-unit}px }
}

This will create 6 classes, each having a dynamic margin-bottom property.

• mb-1
• mb-2
• mb-3
• mb-4
• mb-5
• mb-6

Sources

• @for – Sass docs