css spacing - generates classes to add small, medium, and large margin and padding

spacing.scss

$spacing-small: 10px;
$spacing-medium: $spacing-small * 2;
$spacing-large: $spacing-small * 4;

$size-map: (
  's': $spacing-small,
  'm': $spacing-medium,
  'l': $spacing-large,
);

@mixin spacing-classes($type-abbr, $type, $size-abbr, $size) {
  .#{$type-abbr}a#{$size-abbr} {
    #{$type}: $size;
  }

  .#{$type-abbr}h#{$size-abbr} {
    #{$type}-left: $size;
    #{$type}-right: $size;
  }

  .#{$type-abbr}v#{$size-abbr} {
    #{$type}-top: $size;
    #{$type}-bottom: $size;
  }

  .#{$type-abbr}l#{$size-abbr} {
    #{$type}-left: $size;
  }

  .#{$type-abbr}r#{$size-abbr} {
    #{$type}-right: $size;
  }

  .#{$type-abbr}t#{$size-abbr} {
    #{$type}-top: $size;
  }

  .#{$type-abbr}b#{$size-abbr} {
    #{$type}-bottom: $size;
  }
}

@each $type-abbr, $type in ('m': 'margin', 'p': 'padding') {
  @each $size-abbr, $size in $size-map {
    @include spacing-classes($type-abbr, $type, $size-abbr, $size);
  }
}