More Refactor. This also removes the dirt!

diff --git a/scss/prototype/_spacing.scss b/scss/prototype/_spacing.scss
index 7d1ea03420ac3778780d5326ba69f2d1a07a3222..604d081dd464677492658bed994d847208fa9cbc 100644 (file)
--- a/scss/prototype/_spacing.scss
+++ b/scss/prototype/_spacing.scss
@@ -14,6 +14,12 @@ $prototype-spacing-breakpoints: $global-prototype-breakpoints !default;
 /// @type Number
 $prototype-spacers-count: 3 !default;
 
+/// Available direction's for the spacer properties
+/// @type Map
+$prototype-direction: (
+  top, right, bottom, left, horizontal, vertical
+) !default;
+
 /// Margin helper mixin, all the values are multiplied by `$global-margin` which by default is equal to `1rem`
 /// @param {Number} $top [null] - Margin Top
 /// @param {Number} $right [null] - Margin Right
@@ -70,44 +76,30 @@ $prototype-spacers-count: 3 !default;
     @each $prop in (margin, padding) {
       // All Sides
       .#{$prop}-#{$spacer} {
-        @if ($prop == margin) { @include margin($spacer, $spacer, $spacer, $spacer); }
-        @else if ($prop == padding) { @include padding($spacer, $spacer, $spacer, $spacer); }
-      }
-
-      // Top Side
-      .#{$prop}-top-#{$spacer} {
-        @if ($prop == margin) { @include margin($spacer, null, null, null); }
-        @else if ($prop == padding) { @include padding($spacer, null, null, null); }
-      }
-
-      // Right Side
-      .#{$prop}-right-#{$spacer} {
-        @if ($prop == margin) { @include margin(null, $spacer, null, null); }
-        @else if ($prop == padding) { @include padding(null, $spacer, null, null); }
-      }
-
-      // Bottom Side
-      .#{$prop}-bottom-#{$spacer} {
-        @if ($prop == margin) { @include margin(null, null, $spacer, null); }
-        @else if ($prop == padding) { @include padding(null, $spacer, null, null); }
-      }
-
-      // Left Side
-      .#{$prop}-left-#{$spacer} {
-        @if ($prop == margin) { @include margin(null, null, null, $spacer); }
-        @else if ($prop == padding) { @include padding(null, null, null, $spacer); }
+        @if ($prop == margin) { margin: $spacer; }
+        @else if ($prop == padding) { padding: $spacer; }
       }
 
-      // Horizontal Axes
-      .#{$prop}-horizontal-#{$spacer} {
-        @if ($prop == margin) { @include margin(null, $spacer, null, $spacer); }
-        @else if ($prop == padding) { @include padding(null, $spacer, null, $spacer); }
-      }
-
-      // Vertical Axes
-      .#{$prop}-vertical-#{$spacer} {
-        @if ($prop == margin) { @include margin($spacer, null, $spacer, null); }
-        @else if ($prop == padding) { @include padding($spacer, null, $spacer, null); }
+      @each $dir in $prototype-direction {
+        // Top Side
+        .#{$prop}-#{$dir}-#{$spacer} {
+          @if ($prop == margin) { 
+            @if ($dir == top) { @include margin($top: $spacer); }
+            @else if ($dir == right) { @include margin($right: $spacer); }
+            @else if ($dir == bottom) { @include margin($bottom: $spacer); }
+            @else if ($dir == left) { @include margin($left: $spacer); }
+            @else if ($dir == horizontal) { @include margin($right: $spacer, $left: $spacer); }
+            @else if ($dir == vertical) { @include margin($top: $spacer, $bottom: $spacer); }
+          }
+          @else if ($prop == padding) {
+            @if ($dir == top) { @include padding($top: $spacer); }
+            @else if ($dir == right) { @include padding($right: $spacer); }
+            @else if ($dir == bottom) { @include padding($bottom: $spacer); }
+            @else if ($dir == left) { @include padding($left: $spacer); }
+            @else if ($dir == horizontal) { @include padding($right: $spacer, $left: $spacer); }
+            @else if ($dir == vertical) { @include padding($top: $spacer, $bottom: $spacer); }
+          }
+        }
       }
     }
 
@@ -120,44 +112,30 @@ $prototype-spacers-count: 3 !default;
               @each $prop in (margin, padding) {
                 // All Sides
                 &-#{$prop}-#{$spacer} {
-                  @if ($prop == margin) { @include margin($spacer, $spacer, $spacer, $spacer); }
-                  @else if ($prop == padding) { @include padding($spacer, $spacer, $spacer, $spacer); }
-                }
-
-                // Top Side
-                &-#{$prop}-top-#{$spacer} {
-                  @if ($prop == margin) { @include margin($spacer, null, null, null); }
-                  @else if ($prop == padding) { @include padding($spacer, null, null, null); }
-                }
-
-                // Right Side
-                &-#{$prop}-right-#{$spacer} {
-                  @if ($prop == margin) { @include margin(null, $spacer, null, null); }
-                  @else if ($prop == padding) { @include padding(null, $spacer, null, null); }
-                }
-
-                // Bottom Side
-                &-#{$prop}-bottom-#{$spacer} {
-                  @if ($prop == margin) { @include margin(null, null, $spacer, null); }
-                  @else if ($prop == padding) { @include padding(null, $spacer, null, null); }
-                }
-
-                // Left Side
-                &-#{$prop}-left-#{$spacer} {
-                  @if ($prop == margin) { @include margin(null, null, null, $spacer); }
-                  @else if ($prop == padding) { @include padding(null, null, null, $spacer); }
-                }
-
-                // Horizontal Axes
-                &-#{$prop}-horizontal-#{$spacer} {
-                  @if ($prop == margin) { @include margin(null, $spacer, null, $spacer); }
-                  @else if ($prop == padding) { @include padding(null, $spacer, null, $spacer); }
+                  @if ($prop == margin) { margin: $spacer; }
+                  @else if ($prop == padding) { padding: $spacer; }
                 }
 
-                // Vertical Axes
-                &-#{$prop}-vertical-#{$spacer} {
-                  @if ($prop == margin) { @include margin($spacer, null, $spacer, null); }
-                  @else if ($prop == padding) { @include padding($spacer, null, $spacer, null); }
+                @each $dir in $prototype-direction {
+                  // Top Side
+                  &-#{$prop}-#{$dir}-#{$spacer} {
+                    @if ($prop == margin) { 
+                      @if ($dir == top) { @include margin($top: $spacer); }
+                      @else if ($dir == right) { @include margin($right: $spacer); }
+                      @else if ($dir == bottom) { @include margin($bottom: $spacer); }
+                      @else if ($dir == left) { @include margin($left: $spacer); }
+                      @else if ($dir == horizontal) { @include margin($right: $spacer, $left: $spacer); }
+                      @else if ($dir == vertical) { @include margin($top: $spacer, $bottom: $spacer); }
+                    }
+                    @else if ($prop == padding) {
+                      @if ($dir == top) { @include padding($top: $spacer); }
+                      @else if ($dir == right) { @include padding($right: $spacer); }
+                      @else if ($dir == bottom) { @include padding($bottom: $spacer); }
+                      @else if ($dir == left) { @include padding($left: $spacer); }
+                      @else if ($dir == horizontal) { @include padding($right: $spacer, $left: $spacer); }
+                      @else if ($dir == vertical) { @include padding($top: $spacer, $bottom: $spacer); }
+                    }
+                  }
                 }
               }
             }