SCSS: utility classes for margin/padding

utility-whitespace.scss

// whitespace
$whitespace: 1rem;

$whitespace-types: (
  ( 'short': p, 'long': padding ),
  ( 'short': m, 'long': margin )
);

$whitespace-directions: (
   ( 'name': t, 'prop': top ),
   ( 'name': b, 'prop': bottom ),
   ( 'name': l, 'prop': left ),
   ( 'name': r, 'prop': right )
 );


@for $typeId from 1 through length($whitespace-types) {
  $type: nth($whitespace-types, $typeId);
  $short: map-get($type, 'short');
  $long: map-get($type, 'long');

  .#{$short}-half { #{$long}: $whitespace/2; }
  @for $o from 1 through 5 {
    .#{$short}-#{$o} { #{$long}: $whitespace * $o; }
  }

  @for $i from 1 through length($whitespace-directions) {
    $direction: nth($whitespace-directions, $i);
    $name: map-get($direction, 'name');
    $prop: map-get($direction, 'prop');

    $classPrefix: #{$short}#{$name};
    $propPrefix: #{$long}-#{$prop};

    .#{$classPrefix}-half { #{$propPrefix}: $whitespace/2; }

    @for $o from 1 through 5 {
      .#{$classPrefix}-#{$o} { #{$propPrefix}: $whitespace * $o; }
    }
  }
}