spacers.scss

$spacer: 4px !default;
$spacer-x: $spacer !default;
$spacer-y: $spacer !default;

$spacers: (
  none: (
    x: 0,
    y: 0
  ),
  sm: (
    x: ($spacer-x),
    y: ($spacer-y)
  ),
  md: (
    x: ($spacer-x * 2),
    y: ($spacer-y * 2)
  ),
  lg: (
    x: ($spacer-x * 4),
    y: ($spacer-y * 4)
  ),
  xl: (
    x: ($spacer-x * 6),
    y: ($spacer-y * 6)
  ),
  xxl: (
    x: ($spacer-x * 8),
    y: ($spacer-y * 8)
  )
) !default;

@each $prop, $abbrev in (margin: margin, padding: padding) {
  @each $size, $lengths in $spacers {
    $length-x: map-get($lengths, x);
    $length-y: map-get($lengths, y);

    .#{$abbrev}-#{$size} {
      #{$prop}: $length-y $length-x;
    }
    .#{$abbrev}-top-#{$size} {
      #{$prop}-top: $length-y;
    }
    .#{$abbrev}-right-#{$size} {
      #{$prop}-right: $length-x;
    }
    .#{$abbrev}-bottom-#{$size} {
      #{$prop}-bottom: $length-y;
    }
    .#{$abbrev}-left-#{$size} {
      #{$prop}-left: $length-x;
    }
    .#{$abbrev}-x-#{$size} {
      #{$prop}-right: $length-x;
      #{$prop}-left: $length-x;
    }
    .#{$abbrev}-y-#{$size} {
      #{$prop}-top: $length-y;
      #{$prop}-bottom: $length-y;
    }
  }
}