Bootstrap style CSS spacing helper classes

spacing.css

.m-0 { margin: 0; }
.p-0 { padding: 0; }
.mt-0 { margin-top: 0; }
.pt-0 { padding-top: 0; }
.mr-0 { margin-right: 0; }
.pr-0 { padding-right: 0; }
.mb-0 { margin-bottom: 0; }
.pb-0 { padding-bottom: 0; }
.ml-0 { margin-left: 0; }
.pl-0 { padding-left: 0; }
.mx-0 { margin-left: 0; margin-right: 0; }
.px-0 { padding-left: 0; padding-right: 0; }
.my-0 { margin-top: 0; margin-bottom: 0; }
.py-0 { padding-top: 0; padding-bottom: 0; }
.m-auto { margin: auto; }
.p-auto { padding: auto; }
.mt-auto { margin-top: auto; }
.pt-auto { padding-top: auto; }
.mr-auto { margin-right: auto; }
.pr-auto { padding-right: auto; }
.mb-auto { margin-bottom: auto; }
.pb-auto { padding-bottom: auto; }
.ml-auto { margin-left: auto; }
.pl-auto { padding-left: auto; }
.mx-auto { margin-left: auto; margin-right: auto; }
.px-auto { padding-left: auto; padding-right: auto; }
.my-auto { margin-top: auto; margin-bottom: auto; }
.py-auto { padding-top: auto; padding-bottom: auto; }
.m-1 { margin: 0.25rem; }
.p-1 { padding: 0.25rem; }
.mt-1 { margin-top: 0.25rem; }
.pt-1 { padding-top: 0.25rem; }
.mr-1 { margin-right: 0.25rem; }
.pr-1 { padding-right: 0.25rem; }
.mb-1 { margin-bottom: 0.25rem; }
.pb-1 { padding-bottom: 0.25rem; }
.ml-1 { margin-left: 0.25rem; }
.pl-1 { padding-left: 0.25rem; }
.mx-1 { margin-left: 0.25rem; margin-right: 0.25rem; }
.px-1 { padding-left: 0.25rem; padding-right: 0.25rem; }
.my-1 { margin-top: 0.25rem; margin-bottom: 0.25rem; }
.py-1 { padding-top: 0.25rem; padding-bottom: 0.25rem; }
.m-2 { margin: 0.5rem; }
.p-2 { padding: 0.5rem; }
.mt-2 { margin-top: 0.5rem; }
.pt-2 { padding-top: 0.5rem; }
.mr-2 { margin-right: 0.5rem; }
.pr-2 { padding-right: 0.5rem; }
.mb-2 { margin-bottom: 0.5rem; }
.pb-2 { padding-bottom: 0.5rem; }
.ml-2 { margin-left: 0.5rem; }
.pl-2 { padding-left: 0.5rem; }
.mx-2 { margin-left: 0.5rem; margin-right: 0.5rem; }
.px-2 { padding-left: 0.5rem; padding-right: 0.5rem; }
.my-2 { margin-top: 0.5rem; margin-bottom: 0.5rem; }
.py-2 { padding-top: 0.5rem; padding-bottom: 0.5rem; }
.m-3 { margin: 1rem; }
.p-3 { padding: 1rem; }
.mt-3 { margin-top: 1rem; }
.pt-3 { padding-top: 1rem; }
.mr-3 { margin-right: 1rem; }
.pr-3 { padding-right: 1rem; }
.mb-3 { margin-bottom: 1rem; }
.pb-3 { padding-bottom: 1rem; }
.ml-3 { margin-left: 1rem; }
.pl-3 { padding-left: 1rem; }
.mx-3 { margin-left: 1rem; margin-right: 1rem; }
.px-3 { padding-left: 1rem; padding-right: 1rem; }
.my-3 { margin-top: 1rem; margin-bottom: 1rem; }
.py-3 { padding-top: 1rem; padding-bottom: 1rem; }
.m-4 { margin: 1.5rem; }
.p-4 { padding: 1.5rem; }
.mt-4 { margin-top: 1.5rem; }
.pt-4 { padding-top: 1.5rem; }
.mr-4 { margin-right: 1.5rem; }
.pr-4 { padding-right: 1.5rem; }
.mb-4 { margin-bottom: 1.5rem; }
.pb-4 { padding-bottom: 1.5rem; }
.ml-4 { margin-left: 1.5rem; }
.pl-4 { padding-left: 1.5rem; }
.mx-4 { margin-left: 1.5rem; margin-right: 1.5rem; }
.px-4 { padding-left: 1.5rem; padding-right: 1.5rem; }
.my-4 { margin-top: 1.5rem; margin-bottom: 1.5rem; }
.py-4 { padding-top: 1.5rem; padding-bottom: 1.5rem; }
.m-5 { margin: 3rem; }
.p-5 { padding: 3rem; }
.mt-5 { margin-top: 3rem; }
.pt-5 { padding-top: 3rem; }
.mr-5 { margin-right: 3rem; }
.pr-5 { padding-right: 3rem; }
.mb-5 { margin-bottom: 3rem; }
.pb-5 { padding-bottom: 3rem; }
.ml-5 { margin-left: 3rem; }
.pl-5 { padding-left: 3rem; }
.mx-5 { margin-left: 3rem; margin-right: 3rem; }
.px-5 { padding-left: 3rem; padding-right: 3rem; }
.my-5 { margin-top: 3rem; margin-bottom: 3rem; }
.py-5 { padding-top: 3rem; padding-bottom: 3rem; }

spacing.scss

$marginKey: "m";
$paddingKey: "p";
$spacer: 1;
$sizeUnit: rem;
$separator: "-";
$sizes: (
  ("0", 0),
  ("auto", auto),
  ("1", $spacer * 0.25),
  ("2", $spacer * 0.5),
  ("3", $spacer),
  ("4", $spacer * 1.5),
  ("5", $spacer * 3),
);
$positions: (
  ("t", "top"),
  ("r", "right"),
  ("b", "bottom"),
  ("l", "left"),
  ("x", "x"),
  ("y", "y")
);

@function sizeValue($key, $value) {
  @if ($key == "0") {
    @return 0;
  } @else if ($key == "auto") {
    @return auto;
  } @else {
    @return $value + $sizeUnit;
  }
}

@each $size in $sizes {
  $sizeKey: nth($size, 1);
  $sizeValue: nth($size, 2);
  .#{$marginKey}#{$separator}#{$sizeKey} {
    margin: sizeValue($sizeKey, $sizeValue);
  }
  .#{$paddingKey}#{$separator}#{$sizeKey} {
    padding: sizeValue($sizeKey, $sizeValue);
  }
  @each $position in $positions {
    $posKey: nth($position, 1);
    $posValue: nth($position, 2);
    .#{$marginKey}#{$posKey}#{$separator}#{$sizeKey} {
      @if $posValue == "x" {
        margin-left: sizeValue($sizeKey, $sizeValue);
        margin-right: sizeValue($sizeKey, $sizeValue);
      } @else if $posValue == "y" {
        margin-top: sizeValue($sizeKey, $sizeValue);
        margin-bottom: sizeValue($sizeKey, $sizeValue);
      } @else {
        margin-#{$posValue}: sizeValue($sizeKey, $sizeValue);
      }
    }
    .#{$paddingKey}#{$posKey}#{$separator}#{$sizeKey} {
      @if $posValue == "x" {
        padding-left: sizeValue($sizeKey, $sizeValue);
        padding-right: sizeValue($sizeKey, $sizeValue);
      } @else if $posValue == "y" {
        padding-top: sizeValue($sizeKey, $sizeValue);
        padding-bottom: sizeValue($sizeKey, $sizeValue);
      } @else {
        padding-#{$posValue}: sizeValue($sizeKey, $sizeValue);
      }
    }
  }
}