SCSS - Automated Responsive CSS Utility Spacing Classes via Mixins

sass-space.scss

// margin and padding values array

//set this either locally, or on a variables file.
$space-values: (
  1: $base-spacer-size * 0.25,
  2: $base-spacer-size * 0.5,
  3: $base-spacer-size * 1,
  4: $base-spacer-size * 1.5,
  5: $base-spacer-size * 2,
  6: $base-spacer-size * 2.5,
) !default;

// margin and padding shorthands
$space-prefixes: (
  p: padding,
  pt: padding-top,
  pr: padding-right,
  pb: padding-bottom,
  pl: padding-left,
  m: margin,
  mt: margin-top,
  mr: margin-right,
  mb: margin-bottom,
  ml: margin-left,
) !default;

$breakpoints: (
  xs: 0,
  sm: 576px,
  md: 768px,
  lg: 990px,
  xl: 1280px,
  xxl: 1400px,
) !default;

// single utility generator
@mixin spacing-util-single($values, $prefixes) {
  @each $attr-short, $attr-long in $prefixes {
    @each $designation, $value in $values {
      .#{$attr-short}-#{$designation}{
        #{$attr-long}: #{$value}#{"rem"};
      }
    }
  }  
}

// responsive function
@mixin spacing-util($values, $prefixes, $breakpoints) {
  @each $breakpoint-name, $breakpoint-value in $breakpoints {
    @media screen and (min-width: $breakpoint-value) {
      @each $attr-short, $attr-long in $prefixes {
        @each $designation, $value in $values {
          .#{$attr-short}-#{$designation}-#{$breakpoint-name} {
            #{$attr-long}: #{$value}#{"rem"};
          }
        }
      }
    }
  }
}

@include spacing-util($space-values, $space-prefixes, $breakpoints);
@include spacing-util-single($space-values, $space-prefixes);