SpacingUtilities.scss

/* ===============
   MIXINS
   =============== */

@mixin spacingUtilites($spacers, $directions, $breakpoints) {
   @each $breakpoint_name, $breakpoint in $breakpoints {
      @if ($breakpoint == 0) {
         $breakpoint_name: "";
         @include spacingProperties($spacers, $directions, $breakpoint_name);
      } @else {
         @media (min-width: $breakpoint) {
            $breakpoint_name: -#{$breakpoint_name};
            @include spacingProperties($spacers, $directions, $breakpoint_name);
         }
      }
   }
}

@mixin spacingProperties($spacers, $directions, $breakpoint_name) {
   // set key value pairs for margin and padding
   @each $prop, $letter in (margin: m, padding: p) {
      // ex: m-md-auto
      .#{$letter}#{$breakpoint_name}-auto {
         #{$prop}: auto !important;
      }
      // ex: mx-md-auto
      .#{$letter}x#{$breakpoint_name}-auto {
         #{$prop}-left: auto !important;
         #{$prop}-right: auto !important;
      }
      // ex: my-md-auto
      .#{$letter}y#{$breakpoint_name}-auto {
         #{$prop}-top: auto !important;
         #{$prop}-bottom: auto !important;
      }
      // margin, padding without direction
      @each $size, $rem in $spacers {
         // ex: m-1
         .#{$letter}#{$breakpoint_name}-#{$size} {
            #{$prop}: #{$rem} !important;
         }
         // add in x-axis and y-axis spacing
         // ex: mx-1
         .#{$letter}x#{$breakpoint_name}-#{$size} {
            #{$prop}-left: #{$rem} !important;
            #{$prop}-right: #{$rem} !important;
         }
         // ex: my-1
         .#{$letter}y#{$breakpoint_name}-#{$size} {
            #{$prop}-top: #{$rem} !important;
            #{$prop}-bottom: #{$rem} !important;
         }
      }
      // margin, padding with direction
      @each $direction, $d in $directions {
         // loop through the spacers we've set
         @each $size, $rem in $spacers {
            // ex: ml-md-0
            .#{$letter}#{$d}#{$breakpoint_name}-#{$size} {
               #{$prop}-#{$direction}: #{$rem} !important;
            }
         }
         // ex: mt-auto
         .#{$letter}#{$d}#{$breakpoint_name}-auto {
            #{$prop}: auto !important;
         }
      }
   }
}
/* Variables */
$breakpoints: (
   0: 0,
   sm: 576px,
   md: 768px,
   lg: 992px,
);
// Spacing
$spacer: 1rem !default;
$spacers: () !default;
$spacers: map-merge(
   (
      0: 0,
      1: (
         $spacer * 0.25,
      ),
      2: (
         $spacer * 0.5,
      ),
      3: $spacer,
      4: (
         $spacer * 1.5,
      ),
      5: (
         $spacer * 3,
      ),
   ),
   $spacers
);

$directions: (
   top: t,
   right: r,
   bottom: b,
   left: l,
);

/* ==== Run mixins ====*/
@include spacingUtilites($spacers, $directions, $breakpoints);