Standardize SCSS spacing extenders.

spacing.scss

/**
 * Variables
 */
$space: 20px !default;
$space-tiny: ($space / 4) !default; // ~5px
$space-small:  ($space / 2) !default; // ~10px
$space-medium: ($space * 1.5) !default; // ~30px
$space-large:  ($space * 2) !default; // ~40px
$space-huge: ($space * 3) !default; // ~60px

$size-names: 'space', 'tiny', 'small', 'medium', 'large', 'huge';
$space-vars-list: $space, $space-tiny, $space-small, $space-medium, $space-large, $space-huge;


/**
 * Mixins & Utilities
 */

// Sets Padding and Margin to Zero
.spacing--reset {
  margin: 0;
  padding: 0;
}

@each $space-size in $space-vars-list {
  $i: index($space-vars-list, $space-size);

  @if($i == 1) {
    // Padding all around
    .spacing--padding {
      padding: $space-size;
    }
    .spacing--padding-vertical {
      padding-bottom: $space-size;
      padding-top: $space-size;
    }
    .spacing--padding-horizontal {
      padding-left: $space-size;
      padding-right: $space-size;
    }

    // Margin all around
    .spacing--margin {
      margin: $space-size;
    }
    .spacing--margin-vertical {
      margin-bottom: $space-size;
      margin-top: $space-size;
    }
    .spacing--margin-horizontal {
      margin-left: $space-size;
      margin-right: $space-size;
    }
  } @else {
    $size-name: nth($size-names, $i);

    // Padding all around
    .spacing--padding--#{$size-name} {
      padding: $space-size;
    }
    .spacing--padding-vertical--#{$size-name} {
      padding-bottom: $space-size;
      padding-top: $space-size;
    }
    .spacing--padding-horizontal--#{$size-name} {
      padding-left: $space-size;
      padding-right: $space-size;
    }

    // Margin all around
    .spacing--margin-#{$size-name} {
      margin: $space-size;
    }
    .spacing--margin-vertical--#{$size-name} {
      margin-bottom: $space-size;
      margin-top: $space-size;
    }
    .spacing--margin-horizontal--#{$size-name} {
      margin-left: $space-size;
      margin-right: $space-size;
    }
  }
}