Tachyons spacing module with extra scale steps and mixins

_spacing.scss

// Converted Variables

$spacing-none: 0 !default;
$spacing-extra-small: .25rem !default;
$spacing-small: .5rem !default;
$spacing-small-plus: .75rem !default; // custom
$spacing-medium: 1rem !default;
$spacing-medium-plus: 1.5rem !default; // custom
$spacing-large: 2rem !default;
$spacing-large-plus: 3rem !default; // custom
$spacing-extra-large: 4rem !default;
$spacing-extra-large-plus: 6rem !default; // custom
$spacing-extra-extra-large: 8rem !default;
$spacing-extra-extra-extra-large: 16rem !default;

// Custom Media Query Variables


/* Variables */

/*
   SPACING - CUSTOMIZED
   Docs: http://tachyons.io/docs/layout/spacing/

   An eight step powers of two scale ranging from 0 to 16rem.

   Base:
     p = padding
     m = margin

   Modifiers:
     a = all
     h = horizontal
     v = vertical
     t = top
     r = right
     b = bottom
     l = left

     0 = none
     1 = 1st step in spacing scale
     2 = 2nd step in spacing scale
     3 = 3rd step in spacing scale
     4 = 4th step in spacing scale
     5 = 5th step in spacing scale
     6 = 6th step in spacing scale
     7 = 7th step in spacing scale

   Media Query Extensions:
     -ns = not-small
     -m  = medium
     -l  = large

*/

$map: (
  '0':        $spacing-none,
  '1':        $spacing-extra-small,
  '2':        $spacing-small,
  '2-plus':   $spacing-small-plus,
  '3':        $spacing-medium,
  '3-plus':   $spacing-medium-plus,
  '4':        $spacing-large,
  '4-plus':   $spacing-large-plus,
  '5':        $spacing-extra-large,
  '5-plus':   $spacing-extra-large-plus,
  '6':        $spacing-extra-extra-large,
  '7':        $spacing-extra-extra-extra-large
);

@each $class, $size in $map {
  
  // padding
  .pa#{$class} { padding: $size; }
  .pl#{$class} { padding-left: $size; }
  .pr#{$class} { padding-right: $size; }
  .pt#{$class} { padding-top: $size; }
  .pb#{$class} { padding-bottom: $size; }
  
  .pv#{$class} { padding-top: $size; padding-bottom: $size; }
  .ph#{$class} { padding-left: $size; padding-right: $size; }

  // margins
  .ma#{$class} { margin: $size; }
  .ml#{$class} { margin-left: $size; }
  .mr#{$class} { margin-right: $size; }
  .mt#{$class} { margin-top: $size; }
  .mb#{$class} { margin-bottom: $size; }
  
  .mv#{$class} { margin-top: $size; margin-bottom: $size; }
  .mh#{$class} { margin-left: $size; margin-right: $size; }
}

@media #{$breakpoint-not-small} {

  @each $class, $size in $map {

    // padding
    .pa#{$class}-ns { padding: $size; }
    .pl#{$class}-ns { padding-left: $size; }
    .pr#{$class}-ns { padding-right: $size; }
    .pt#{$class}-ns { padding-top: $size; }
    .pb#{$class}-ns { padding-bottom: $size; }
    
    .pv#{$class}-ns { padding-top: $size; padding-bottom: $size; }
    .ph#{$class}-ns { padding-left: $size; padding-right: $size; }

    // margins
    .ma#{$class}-ns { margin: $size; }
    .ml#{$class}-ns { margin-left: $size; }
    .mr#{$class}-ns { margin-right: $size; }
    .mt#{$class}-ns { margin-top: $size; }
    .mb#{$class}-ns { margin-bottom: $size; }
    
    .mv#{$class}-ns { margin-top: $size; margin-bottom: $size; }
    .mh#{$class}-ns { margin-left: $size; margin-right: $size; }  
  }
}

@media #{$breakpoint-medium} {

  @each $class, $size in $map {

    // padding
    .pa#{$class}-m { padding: $size; }
    .pl#{$class}-m { padding-left: $size; }
    .pr#{$class}-m { padding-right: $size; }
    .pt#{$class}-m { padding-top: $size; }
    .pb#{$class}-m { padding-bottom: $size; }
    
    .pv#{$class}-m { padding-top: $size; padding-bottom: $size; }
    .ph#{$class}-m { padding-left: $size; padding-right: $size; }

    // margins
    .ma#{$class}-m { margin: $size; }
    .ml#{$class}-m { margin-left: $size; }
    .mr#{$class}-m { margin-right: $size; }
    .mt#{$class}-m { margin-top: $size; }
    .mb#{$class}-m { margin-bottom: $size; }
    
    .mv#{$class}-m { margin-top: $size; margin-bottom: $size; }
    .mh#{$class}-m { margin-left: $size; margin-right: $size; }  
  }
}

@media #{$breakpoint-large} {

  @each $class, $size in $map {

    // padding
    .pa#{$class}-l { padding: $size; }
    .pl#{$class}-l { padding-left: $size; }
    .pr#{$class}-l { padding-right: $size; }
    .pt#{$class}-l { padding-top: $size; }
    .pb#{$class}-l { padding-bottom: $size; }
    
    .pv#{$class}-l { padding-top: $size; padding-bottom: $size; }
    .ph#{$class}-l { padding-left: $size; padding-right: $size; }

    // margins
    .ma#{$class}-l { margin: $size; }
    .ml#{$class}-l { margin-left: $size; }
    .mr#{$class}-l { margin-right: $size; }
    .mt#{$class}-l { margin-top: $size; }
    .mb#{$class}-l { margin-bottom: $size; }
    
    .mv#{$class}-l { margin-top: $size; margin-bottom: $size; }
    .mh#{$class}-l { margin-left: $size; margin-right: $size; }  
  }
}