Margin and Padding helper classes.

spacer-factory.scss

// Margin and Padding helper classes.
@mixin spacer-factory($prop, $alias, $start: 0, $end: 5, $unit: rem, $use-important: true){
  $directions: (
    top: t,
    right: r,
    bottom: b,
    left: l
  );
  
  $important: if($use-important == true, " !important", "");
  
  @for $i from $start through $end {
    .#{$alias}#{$i} {
      #{$prop}: #{$i}#{$unit}#{$important};
    }
    @each $direction, $direction-alias in $directions {
      .#{$alias}#{$direction-alias}#{$i} {
        #{$prop}-#{$direction}: #{$i}#{$unit}#{$important};
      }
    }
  }
}

usage.scss

@import "spacer-factory";

@include spacer-factory(margin, m, 0, 3);
@include spacer-factory(padding, p, 0, 3);

//== Results
/*
.m0 {
  margin: 0rem !important;
}

.mt0 {
  margin-top: 0rem !important;
}

.mr0 {
  margin-right: 0rem !important;
}

.mb0 {
  margin-bottom: 0rem !important;
}

.ml0 {
  margin-left: 0rem !important;
}

.m1 {
  margin: 1rem !important;
}

.mt1 {
  margin-top: 1rem !important;
}

.mr1 {
  margin-right: 1rem !important;
}

.mb1 {
  margin-bottom: 1rem !important;
}

.ml1 {
  margin-left: 1rem !important;
}

.m2 {
  margin: 2rem !important;
}

.mt2 {
  margin-top: 2rem !important;
}

.mr2 {
  margin-right: 2rem !important;
}

.mb2 {
  margin-bottom: 2rem !important;
}

.ml2 {
  margin-left: 2rem !important;
}

.m3 {
  margin: 3rem !important;
}

.mt3 {
  margin-top: 3rem !important;
}

.mr3 {
  margin-right: 3rem !important;
}

.mb3 {
  margin-bottom: 3rem !important;
}

.ml3 {
  margin-left: 3rem !important;
}

.p0 {
  padding: 0rem !important;
}

.pt0 {
  padding-top: 0rem !important;
}

.pr0 {
  padding-right: 0rem !important;
}

.pb0 {
  padding-bottom: 0rem !important;
}

.pl0 {
  padding-left: 0rem !important;
}

.p1 {
  padding: 1rem !important;
}

.pt1 {
  padding-top: 1rem !important;
}

.pr1 {
  padding-right: 1rem !important;
}

.pb1 {
  padding-bottom: 1rem !important;
}

.pl1 {
  padding-left: 1rem !important;
}

.p2 {
  padding: 2rem !important;
}

.pt2 {
  padding-top: 2rem !important;
}

.pr2 {
  padding-right: 2rem !important;
}

.pb2 {
  padding-bottom: 2rem !important;
}

.pl2 {
  padding-left: 2rem !important;
}

.p3 {
  padding: 3rem !important;
}

.pt3 {
  padding-top: 3rem !important;
}

.pr3 {
  padding-right: 3rem !important;
}

.pb3 {
  padding-bottom: 3rem !important;
}

.pl3 {
  padding-left: 3rem !important;
}
*/