SASS Space - Responsive CSS Positioning Classes built with SASS

sass-space.scss

// change to false if its not imported into bootstrap
$use-bootstrap: true;

// margin and padding values array
$space-values : (
  5,
  10,
  15,
  20,
  30,
  40,
  50,
  100,
  200,
  300
) !default;

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

// change these values if its not imported into bootstrap
$grid-breakpoints-custom: (
  // Extra small screen / phone
  xs: 0,
  // Small screen / phone
  sm: 480px,
  // Medium screen / tablet
  md: 768px,
  // Large screen / desktop
  lg: 960px,
  // Extra large screen / wide desktop
  xl: 1280px
) !default;

$breakpoints : $grid-breakpoints-custom;
@if $use-bootstrap {
  $breakpoints : $grid-breakpoints;
}

@mixin print-values($breakpoint-name, $prefixes, $values) {
  @each $attr-short, $attr-long in $prefixes {
    @each $value in $values {
      .#{$breakpoint-name}-#{$attr-short}-#{$value} {
        @if(length($attr-long)) {
          @each $a in $attr-long {
            #{$a}: #{$value}px;
          }
        } @else {
          #{$attr-long}: #{$value}px;
        }
      }
    }
  }
}

// main function definition
@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) {
      @include print-values($breakpoint-name, $prefixes, $values);
    }
    // breakpoint values that not equal to 0
    @else {
      @media screen and (min-width: $breakpoint-value) {
        @include print-values($breakpoint-name, $prefixes, $values);
      }
    }
  }
}

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

On line 52 it should be $breakpoints : $breakpoints;