Responsive CSS Spacing Map built with SASS

spacing.scss

$space-values : (
  0,4,8,12,16,20,24,32,40,48,64,80,120,160
) !default;

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

$grid-breakpoints-custom: (
  : 0,
  l: 1024px,
  m: 1023px,
  s: 640px
) !default;


$breakpoints : $grid-breakpoints-custom;


@mixin make-space($values, $prefixes, $breakpoints) {
  @each $breakpoint-name, $breakpoint-value in $breakpoints {

    // if xs value = 0, set it global without media queries
    @if($breakpoint-value == 0) {
      @each $attr-short, $attr-long in $prefixes {
        @each $value in $values {
          // .#{$breakpoint-name}-#{$attr-short}-#{$value} {
          .#{$attr-short}-#{$value} {
            #{$attr-long}: #{$value}#{'px'};
          }
        }
      }
    }

    // large only
    @elseif($breakpoint-value == 1024px) {
      @media screen and (min-width: $breakpoint-value) {
        @each $attr-short, $attr-long in $prefixes {
          @each $value in $values {
            .#{$attr-short}-#{$breakpoint-name}-#{$value} {
              #{$attr-long}: #{$value}#{'px'};
            }
          }
        }
      }
    }
    
    // medium + small
    @else {
      @media screen and (max-width: $breakpoint-value) {
        @each $attr-short, $attr-long in $prefixes {
          @each $value in $values {
            .#{$attr-short}-#{$breakpoint-name}-#{$value} {
              #{$attr-long}: #{$value}#{'px'};
            }
          }
        }
      }
    }

  }
}

@include make-space($space-values, $space-prefixes, $breakpoints);