$space-base: 8px;
$space-1: $space-base * 1;
$space-2: $space-base * 2;
$space-3: $space-base * 3;
$space-4: $space-base * 4;
$space-5: $space-base * 5;
$space-6: $space-base * 6;
$space-7: $space-base * 7;
$space-8: $space-base * 8;

$sizeMap: (
  1: $space-1,
  2: $space-2,
  3: $space-3,
  4: $space-4,
  5: $space-5,
  6: $space-6,
  7: $space-7,
  8: $space-8
);

@each $key, $val in $sizeMap {
  .m {
    &-#{$key} {
      margin: $val;
    }
    &t-#{$key} {
      margin-top: $val;
    }
    &r-#{$key} {
      margin-right: $val;
    }
    &b-#{$key} {
      margin-bottom: $val;
    }
    &l-#{$key} {
      margin-left: $val;
    }
    &x-#{$key} {
      margin: 0 $val;
    }
    &y-#{$key} {
      margin: $val 0;
    }
  }

  .p {
    &-#{$key} {
      padding: $val;
    }
    &t-#{$key} {
      padding-top: $val;
    }
    &r-#{$key} {
      padding-right: $val;
    }
    &b-#{$key} {
      padding-bottom: $val;
    }
    &l-#{$key} {
      padding-left: $val;
    }
    &x-#{$key} {
      padding: 0 $val;
    }
    &y-#{$key} {
      padding: $val 0;
    }
  }
}