SASS Margin and Padding Helpers Loop. Generates .mts type helper classes.

_spacing-helpers.scss

/*
 * Spacing helpers for consistent margin and padding on elements. Uses rems (not px!)
 *
 * With the current default settings, generates classes like:
 * .mts = margin-top: 0.5rem
 * .phl = padding-left: 2rem; padding-right: 2rem; // h = horizontal = left/right
 *
 * Inspired by:
 * https://github.com/mrmrs/css-spacing
 * https://getbootstrap.com/docs/4.0/utilities/spacing/
 * https://github.com/jgthms/bulma/issues/451#issuecomment-331758839
 */
$sizeUnit: rem;
$marginKey: 'm';
$paddingKey: 'p';
$separator: '';
$allKey: 'a';
$verticalKey: 'v';
$horizontalKey: 'h';
$positions: (
  t: 'top',
  r: 'right',
  b: 'bottom',
  l: 'left',
);
$sizes: (
  n: 0,
  xxs: 0.125,
  xs: 0.25,
  s: 0.5,
  m: 1,
  l: 2,
  xl: 4,
  xxl: 8,
);

/*
// Defaults for bootstrap-style, see: https://getbootstrap.com/docs/4.0/utilities/spacing/
$separator: '-';
$allKey: '';
$verticalKey: 'y';
$horizontalKey: 'x';
// Bootstrap uses different size steps:
$sizes: (
  0: 0,
  1: 0.25,
  2: 0.5,
  3: 1,
  4: 1.5,
  5: 4,
  auto: 'auto',
);
*/

@function size-value($value) {
  @if $value == 0 { @return $value; }

  @if $value == 'auto' { @return $value; }

  @return #{$value}#{$sizeUnit};
}

@each $sizeKey, $sizeValue in $sizes {

  // "all" (top-right-bottom-left)
  .#{$marginKey}#{$allKey}#{$separator}#{$sizeKey} {
    margin: size-value($sizeValue);
  }

  .#{$paddingKey}#{$allKey}#{$separator}#{$sizeKey} {
    padding: size-value($sizeValue);
  }

  // vertical (top-bottom)
  .#{$marginKey}#{$verticalKey}#{$separator}#{$sizeKey} {
    margin-top: size-value($sizeValue);
    margin-bottom: size-value($sizeValue);
  }

  .#{$paddingKey}#{$verticalKey}#{$separator}#{$sizeKey} {
    padding-top: size-value($sizeValue);
    padding-bottom: size-value($sizeValue);
  }

  // horizontal (left-right)
  .#{$marginKey}#{$horizontalKey}#{$separator}#{$sizeKey} {
    margin-left: size-value($sizeValue);
    margin-right: size-value($sizeValue);
  }

  .#{$paddingKey}#{$horizontalKey}#{$separator}#{$sizeKey} {
    padding-left: size-value($sizeValue);
    padding-right: size-value($sizeValue);
  }

  // each of top,right,bottom,left:
  @each $posKey, $posValue in $positions {
    .#{$marginKey}#{$posKey}#{$separator}#{$sizeKey} {
      margin-#{$posValue}: size-value($sizeValue);
    }

    .#{$paddingKey}#{$posKey}#{$separator}#{$sizeKey} {
      padding-#{$posValue}: size-value($sizeValue);
    }
  }
}

spacing-helpers.css

/*
  THIS IS THE GENERATED FILE THAT IS PRODUCED USING THE SIMPLE LOOP SHOWN ABOVE
*/


.mtn { margin-top: 0 }
.ptn { margin-top: 0 }
.mtxxs { margin-top: 0.125rem }
.ptxxs { padding-top: 0.125rem }
  
  // ... TODO

@thom-nic, how to use breakpoints?