@import "variables";
@mixin spacing($infix:'') {
  @if($infix!=''){
    $infix: $infix+"-";
  }
  @each $prop, $abbrev in (margin: m, padding: p) {
    @each $size, $length in $spacers {
      .#{$abbrev}-#{$infix}#{$size} { #{$prop}:         $length !important; }
      .#{$abbrev}t-#{$infix}#{$size} { #{$prop}-top:    $length !important; }
      .#{$abbrev}r-#{$infix}#{$size} { #{$prop}-right:  $length !important; }
      .#{$abbrev}b-#{$infix}#{$size} { #{$prop}-bottom: $length !important; }
      .#{$abbrev}l-#{$infix}#{$size} { #{$prop}-left:   $length !important; }
    }
  }
}

@include spacing('');
@each $breakpointName, $breakpointSize in $breakpoints{
  @media only screen and (min-width: #{$breakpointSize}){
    @include spacing($breakpointName);
  }
}