SCSS: Margin and Padding Helper loop. Generates helper classes like `.m-t-2`, `.p-b-3`, `.m-r-1`, etc.

_helper-margin-padding.scss

// ~ Margin & padding helper ~
// by @dreamyguy - Wallace Sidhrée [http://sidhree.com]
// See https://gist.github.com/dreamyguy/2fc16be42a01f21527c5a12bbb662f08
// Based on https://gist.github.com/jacurtis/30da4bf9a6c9b9b5cc0aebac512ca7c9 by J. Alexander Curtis
//
// Generates the following classes:
// .m-t-[x]: margin-top [y]rem.
// .m-b-[x]: margin-bottom [y]rem.
// .p-t-[x]: margin-top [y]rem.
// .p-b-[x]: margin-bottom [y]rem.
// The first letter is "m" (margin) or "p" (padding)
// Second letter is "t" (top), "b" (bottom), "l" (left) or "r" (right)
// Third value is 'unit size', set by the 'spaceValues' list
//
// * 'spaceValues' & 'spaceSteps' should have the same length
// * 'sides' can be removed, ie. keep only 'top & 'bottom'
// * 'spaceValues' can be edited to be what you need it to be, but should be integers
// * Unit can be changed from 'rem' to 'px'

$spaceSteps: (half, 1, 2, 3, 4, 5, 6);
$spaceValues: (0.5, 1, 2, 3, 5, 8, 13);
$sides: (top, bottom, left, right);

@each $side in $sides {
  @for $i from 1 through length($spaceSteps) {
    .m-#{str-slice($side, 0, 1)}-#{nth($spaceSteps, $i)} {
      margin-#{$side}: #{nth($spaceValues, $i)}rem;
    }
    .p-#{str-slice($side, 0, 1)}-#{nth($spaceSteps, $i)} {
      padding-#{$side}: #{nth($spaceValues, $i)}rem;
    }
  }
}

output.css

.m-t-half { margin-top: 0.5rem; }
.p-t-half { padding-top: 0.5rem; }
.m-t-1 { margin-top: 1rem; }
.p-t-1 { padding-top: 1rem; }
.m-t-2 { margin-top: 2rem; }
.p-t-2 { padding-top: 2rem; }
.m-t-3 { margin-top: 3rem; }
.p-t-3 { padding-top: 3rem; }
.m-t-4 { margin-top: 5rem; }
.p-t-4 { padding-top: 5rem; }
.m-t-5 { margin-top: 8rem; }
.p-t-5 { padding-top: 8rem; }
.m-t-6 { margin-top: 13rem; }
.p-t-6 { padding-top: 13rem; }
.m-b-half { margin-bottom: 0.5rem; }
.p-b-half { padding-bottom: 0.5rem; }
.m-b-1 { margin-bottom: 1rem; }
.p-b-1 { padding-bottom: 1rem; }
.m-b-2 { margin-bottom: 2rem; }
.p-b-2 { padding-bottom: 2rem; }
.m-b-3 { margin-bottom: 3rem; }
.p-b-3 { padding-bottom: 3rem; }
.m-b-4 { margin-bottom: 5rem; }
.p-b-4 { padding-bottom: 5rem; }
.m-b-5 { margin-bottom: 8rem; }
.p-b-5 { padding-bottom: 8rem; }
.m-b-6 { margin-bottom: 13rem; }
.p-b-6 { padding-bottom: 13rem; }
.m-l-half { margin-left: 0.5rem; }
.p-l-half { padding-left: 0.5rem; }
.m-l-1 { margin-left: 1rem; }
.p-l-1 { padding-left: 1rem; }
.m-l-2 { margin-left: 2rem; }
.p-l-2 { padding-left: 2rem; }
.m-l-3 { margin-left: 3rem; }
.p-l-3 { padding-left: 3rem; }
.m-l-4 { margin-left: 5rem; }
.p-l-4 { padding-left: 5rem; }
.m-l-5 { margin-left: 8rem; }
.p-l-5 { padding-left: 8rem; }
.m-l-6 { margin-left: 13rem; }
.p-l-6 { padding-left: 13rem; }
.m-r-half { margin-right: 0.5rem; }
.p-r-half { padding-right: 0.5rem; }
.m-r-1 { margin-right: 1rem; }
.p-r-1 { padding-right: 1rem; }
.m-r-2 { margin-right: 2rem; }
.p-r-2 { padding-right: 2rem; }
.m-r-3 { margin-right: 3rem; }
.p-r-3 { padding-right: 3rem; }
.m-r-4 { margin-right: 5rem; }
.p-r-4 { padding-right: 5rem; }
.m-r-5 { margin-right: 8rem; }
.p-r-5 { padding-right: 8rem; }
.m-r-6 { margin-right: 13rem; }
.p-r-6 { padding-right: 13rem; }