spacing-utils.scss

$margin-unit: 4;
$padding-unit: 4;

$spacing-modifiers: (
  'ma': margin,
  'mx': margin,
  'my': margin,
  'mt': margin-top,
  'mr': margin-right,
  'mb': margin-bottom,
  'ml': margin-left,
  'pa': padding,
  'px': padding,
  'py': padding,
  'pt': padding-top,
  'pr': padding-right,
  'pb': padding-bottom,
  'pl': padding-left
);

@mixin create-spacing-classes($modifier, $value) {
  @for $i from 1 through 10 {
    @if ($modifier == 'mx' or $modifier == 'px') {
      .#{$modifier}-#{$i} {
        #{$value}: 0 unquote(($i * $margin-unit) + 'px');
      }
    } @else if ($modifier == 'my' or $modifier == 'py') {
      .#{$modifier}-#{$i} {
        #{$value}: unquote(($i * $margin-unit) + 'px') 0;
      }
    } @else {
      .#{$modifier}-#{$i} {
        #{$value}: unquote(($i * $margin-unit) + 'px');
      }
    }
  }
}
@each $modifier, $value in $spacing-modifiers {
  @include create-spacing-classes($modifier, $value);
}