Sass mixin for creating margin and padding utils

_variate.scss

// ------------------------------------------------------------------------
//
// @mixin variate($style, $sizes, $variations, $withUnits)
//
// creates a list of shortcut utitlity classes, with variations for each side
//
// Usage:
//
// variate(margin);
// variate(margin, (0em, 6em, 12em, 24em, 48em));
// variate(margin, null, ('top', 'bottom'));
// variate(margin, null, null, true);
//
// see https://gist.github.com/loopmode/3649ff80eda32c444467a8389df368d2
//
// ------------------------------------------------------------------------


$default_sizes: (0px, 5px, 10px, 20px, 40px, 80px);
$default_variations: ('', 'top', 'left', 'bottom', 'right');

@mixin variate(
  $style,
  $sizes: $default_sizes,
  $variations: $default_variations,
  $withUnits: false
) {
  // allow falsey values to use defaults, for e.g variate(margin, null, null, true)
  $sizes: if($sizes, $sizes, $default_sizes);
  $variations: if($variations, $variations, $default_variations);

  @each $size in $sizes {
    $sizeIndex: index($sizes, $size) - 1;

    @each $variation in $variations {
      $styleLetter: str-slice($style, 0, 1);
      $sideLetter: str-slice($variation, 0, 1);

      $indexClassName: $styleLetter + $sideLetter + '-' + $sizeIndex;
      $unitClassName: $styleLetter + $sideLetter + '-' + $size;

      $className: if(
        $withUnits,
        '#{$indexClassName}, .#{$unitClassName}',
        $indexClassName
      );

      .#{$className} {
        $styleName: if($variation == '', $style, #{$style}-#{$variation});
        #{$styleName}: $size;
      }
    }
  }
}

example_with_custom_values.scss

@import 'variate';
@include variate(margin, (0px, 24px, 48px), ('top', 'bottom'), true);
@include variate(padding, (0px, 24px, 48px), ('top', 'bottom'), true);

// generated output:

.mt-0, .mt-0px {
  margin-top: 0px; }

.mb-0, .mb-0px {
  margin-bottom: 0px; }

.mt-1, .mt-24px {
  margin-top: 24px; }

.mb-1, .mb-24px {
  margin-bottom: 24px; }

.mt-2, .mt-48px {
  margin-top: 48px; }

.mb-2, .mb-48px {
  margin-bottom: 48px; }

.pt-0, .pt-0px {
  padding-top: 0px; }

.pb-0, .pb-0px {
  padding-bottom: 0px; }

.pt-1, .pt-24px {
  padding-top: 24px; }

.pb-1, .pb-24px {
  padding-bottom: 24px; }

.pt-2, .pt-48px {
  padding-top: 48px; }

.pb-2, .pb-48px {
  padding-bottom: 48px; }

example_with_defaults.scss

@import 'variate';
@include variate(margin);
@include variate(padding);

// generated output:

.m-0 {
  margin: 0px; }

.mt-0 {
  margin-top: 0px; }

.ml-0 {
  margin-left: 0px; }

.mb-0 {
  margin-bottom: 0px; }

.mr-0 {
  margin-right: 0px; }

.m-1 {
  margin: 5px; }

.mt-1 {
  margin-top: 5px; }

.ml-1 {
  margin-left: 5px; }

.mb-1 {
  margin-bottom: 5px; }

.mr-1 {
  margin-right: 5px; }

.m-2 {
  margin: 10px; }

.mt-2 {
  margin-top: 10px; }

.ml-2 {
  margin-left: 10px; }

.mb-2 {
  margin-bottom: 10px; }

.mr-2 {
  margin-right: 10px; }

.m-3 {
  margin: 20px; }

.mt-3 {
  margin-top: 20px; }

.ml-3 {
  margin-left: 20px; }

.mb-3 {
  margin-bottom: 20px; }

.mr-3 {
  margin-right: 20px; }

.m-4 {
  margin: 40px; }

.mt-4 {
  margin-top: 40px; }

.ml-4 {
  margin-left: 40px; }

.mb-4 {
  margin-bottom: 40px; }

.mr-4 {
  margin-right: 40px; }

.m-5 {
  margin: 80px; }

.mt-5 {
  margin-top: 80px; }

.ml-5 {
  margin-left: 80px; }

.mb-5 {
  margin-bottom: 80px; }

.mr-5 {
  margin-right: 80px; }

.p-0 {
  padding: 0px; }

.pt-0 {
  padding-top: 0px; }

.pl-0 {
  padding-left: 0px; }

.pb-0 {
  padding-bottom: 0px; }

.pr-0 {
  padding-right: 0px; }

.p-1 {
  padding: 5px; }

.pt-1 {
  padding-top: 5px; }

.pl-1 {
  padding-left: 5px; }

.pb-1 {
  padding-bottom: 5px; }

.pr-1 {
  padding-right: 5px; }

.p-2 {
  padding: 10px; }

.pt-2 {
  padding-top: 10px; }

.pl-2 {
  padding-left: 10px; }

.pb-2 {
  padding-bottom: 10px; }

.pr-2 {
  padding-right: 10px; }

.p-3 {
  padding: 20px; }

.pt-3 {
  padding-top: 20px; }

.pl-3 {
  padding-left: 20px; }

.pb-3 {
  padding-bottom: 20px; }

.pr-3 {
  padding-right: 20px; }

.p-4 {
  padding: 40px; }

.pt-4 {
  padding-top: 40px; }

.pl-4 {
  padding-left: 40px; }

.pb-4 {
  padding-bottom: 40px; }

.pr-4 {
  padding-right: 40px; }

.p-5 {
  padding: 80px; }

.pt-5 {
  padding-top: 80px; }

.pl-5 {
  padding-left: 80px; }

.pb-5 {
  padding-bottom: 80px; }

.pr-5 {
  padding-right: 80px; }