sajad torkamani
$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

Tagged: