$spaces:
4,
8,
12,
16,
20,
24,
28,
32,
36,
40,
44,
48,
56,
64;


$spaceTypes: (
  'm': 'margin',
  'p': 'padding'
);

@function toRem($base) {
  @return $base / 16 * 1rem;
};

@each $space in $spaces {
  @each $typeInitial, $type in $spaceTypes {
    .#{$typeInitial}-#{$space} {
      #{$type}: toRem($space);
    }
    .#{$typeInitial}y-#{$space} {
      #{$type}-top: toRem($space);
      #{$type}-bottom: toRem($space);
    }
    .#{$typeInitial}x-#{$space} {
      #{$type}-left: toRem($space);
      #{$type}-right: toRem($space);
    }
    .#{$typeInitial}b-#{$space} {
      #{$type}-bottom: toRem($space);
    }
    .#{$typeInitial}t-#{$space} {
      #{$type}-top: toRem($space);
    }
    .#{$typeInitial}l-#{$space} {
      #{$type}-left: toRem($space);
    }
    .#{$typeInitial}r-#{$space} {
      #{$type}-right: toRem($space);
    }
  }
}