sajad torkamani

Sass: Generate classes dynamically

4 September 2022 (Updated 4 September 2022) 
$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