Sass spacing helper

sass-spacing-helper.scss

/**
 * This is based on https://getbootstrap.com/docs/4.1/utilities/spacing/
 */

$directioMap: (
  top: t,
  right: r,
  left: l,
  bottom: b
);

$baseSpace: 5;
@for $n from 0 to 100 {
  @each $d in 'top', 'right', 'left', 'bottom' {
    $abbr: map-get($directioMap, $d);
    .m#{$abbr}-#{$n} {
      margin-#{$d}: ($baseSpace * $n) + px;
    }

    .p#{$abbr}-#{$n} {
      padding-#{$d}: ($baseSpace * $n) + px;
    }
  }
}