_spacing.scss

// Usage: m-0 to m-7
// Usage: p-0 to p-7
// Usage: mb-0 to mb-7 

$sizeUnit: rem;
$marginKey: 'm';
$paddingKey: 'p';
$separator: '-';
$sizes: (
  ('0', 0),
  ('1', 0.125),
  ('2', 0.25),
  ('3', 0.5),
  ('4', 1),
  ('5', 2),
  ('6', 4),
  ('7', 8),
);
$positions: (
  ('t', 'top'),
  ('r', 'right'),
  ('b', 'bottom'),
  ('l', 'left')
);

@function sizeValue( $key, $value ) {
  @return if( $key == 'none', 0, $value + $sizeUnit );
}

// Run through all sizes.
@each $size in $sizes {
  $sizeKey: nth( $size, 1 );
  $sizeValue: nth( $size, 2 );

  // For all positions margin
  .#{$marginKey}#{$separator}#{$sizeKey} {
    margin: sizeValue( $sizeKey, $sizeValue ) !important;
  }

  // For all positions padding
  .#{$paddingKey}#{$separator}#{$sizeKey} {
    padding: sizeValue( $sizeKey, $sizeValue ) !important;
  }

  // For each position
  @each $position in $positions {
    $posKey: nth( $position, 1 );
    $posValue: nth( $position, 2 );

    // For each margin
    .#{$marginKey}#{$posKey}#{$separator}#{$sizeKey} {
      margin-#{$posValue}: sizeValue( $sizeKey, $sizeValue ) !important;
    }
    // For each padding
    .#{$paddingKey}#{$posKey}#{$separator}#{$sizeKey} {
      padding-#{$posValue}: sizeValue( $sizeKey, $sizeValue ) !important;
    }
  }
}