margin-padding.scss

$basicStep: 4px;
$stepsAmount: 12;

$gaps: ('m': 'margin', 'p': 'padding');
$directions: (
  'l': 'left',
  'r': 'right',
  't': 'top',
  'b': 'bottom',
  'a': 'all',
  'y': 'vertical',
  'x': 'horizontal'
);

@each $gapKey, $gapValue in $gaps {
  @each $dirKey, $dirValue in $directions {
    @for $i from 1 through 12 {
      @if $dirKey == 'a' {
        .#{$gapKey}#{$dirKey}-#{$i} {
          #{$gapValue}: $i * $basicStep;
        }
      }

      @else if $dirKey == 'x' {
        .#{$gapKey}#{$dirKey}-#{$i} {
          #{$gapValue}-right: $i * $basicStep;
          #{$gapValue}-left: $i * $basicStep;
        }
      }

      @else if $dirKey == 'y' {
        .#{$gapKey}#{$dirKey}-#{$i} {
          #{$gapValue}-top: $i * $basicStep;
          #{$gapValue}-bottom: $i * $basicStep;
        }
      }

      @else {
        .#{$gapKey}#{$dirKey}-#{$i} {
          #{$gapValue}-#{$dirValue}: $i * $basicStep;
        }
      }
    }
  }
}