Improved mixin logic: Semantic + Dry Coding

diff --git a/scss/prototype/_display.scss b/scss/prototype/_display.scss
index 39e4d643cdfd959787f4f780b13f5706a29c581c..1973b077679b7c170fa47bcfd588ad5bf54b8588 100644 (file)
--- a/scss/prototype/_display.scss
+++ b/scss/prototype/_display.scss
@@ -16,10 +16,14 @@ $prototype-display-classes: (
   none, inline, inline-block, block, table, table-cell
 ) !default;
 
+@mixin display($display) {
+    display: $display !important;
+}
+
 @mixin foundation-prototype-display {
   @each $display in $prototype-display-classes {
     .display-#{$display} {
-      display: $display !important;
+       @include display($display);
     }
   }
 
@@ -30,7 +34,7 @@ $prototype-display-classes: (
         @each $display in $prototype-display-classes {
           @if $size != $-zf-zero-breakpoint {
             .#{$size}-display-#{$display} {
-              display: $display !important;
+              @include display($display);
             }
           }
         }

diff --git a/scss/prototype/_list-style-type.scss b/scss/prototype/_list-style-type.scss
index 4c15ffc49c552b924b98b15f577de92e13cb5dd1..cabb25a7b7a129f9a8a350e8afdc8dad8e1331e5 100644 (file)
--- a/scss/prototype/_list-style-type.scss
+++ b/scss/prototype/_list-style-type.scss
@@ -22,11 +22,20 @@ $prototype-style-type-ordered-classes: (
   decimal, lower-alpha, lower-latin, lower-roman, upper-alpha, upper-latin, upper-roman
 ) !default;
 
+@mixin style-type-unordered($style-type-unordered) {
+  margin-#{$global-left}: 0;
+  list-style-type: $style-type-unordered;
+}
+
+@mixin style-type-ordered($style-type-ordered) {
+  margin-#{$global-left}: 0;
+  list-style-type: $style-type-ordered;
+}
+
 @mixin list-unordered {
   @each $style-type-unordered in $prototype-style-type-unordered-classes {
     ul.list-#{$style-type-unordered} {
-      margin-#{$global-left}: 0;
-      list-style-type: $style-type-unordered;
+      @include style-type-unordered($style-type-unordered);
     }
   }
 
@@ -37,8 +46,7 @@ $prototype-style-type-ordered-classes: (
         @each $style-type-unordered in $prototype-style-type-unordered-classes {
           @if $size != $-zf-zero-breakpoint {
             ul.#{$size}-list-#{$style-type-unordered} {
-              margin-#{$global-left}: 0;
-              list-style-type: $style-type-unordered;
+              @include style-type-unordered($style-type-unordered);
             }
           }
         }
@@ -50,8 +58,7 @@ $prototype-style-type-ordered-classes: (
 @mixin list-ordered {
   @each $style-type-ordered in $prototype-style-type-ordered-classes {
     ol.list-#{$style-type-ordered} {
-      margin-#{$global-left}: 0;
-      list-style-type: $style-type-ordered;
+      @include style-type-ordered($style-type-ordered);
     }
   }
 
@@ -62,8 +69,7 @@ $prototype-style-type-ordered-classes: (
         @each $style-type-ordered in $prototype-style-type-ordered-classes {
           @if $size != $-zf-zero-breakpoint {
             ol.#{$size}-list-#{$style-type-ordered} {
-              margin-#{$global-left}: 0;
-              list-style-type: $style-type-ordered;
+              @include style-type-ordered($style-type-ordered);
             }
           }
         }

diff --git a/scss/prototype/_overflow.scss b/scss/prototype/_overflow.scss
index 643243e82efd3dc7d19c7be47d36a4609894693e..b951d6891a4b4e302710b4624f05a3a1d9b06514 100644 (file)
--- a/scss/prototype/_overflow.scss
+++ b/scss/prototype/_overflow.scss
@@ -16,16 +16,28 @@ $prototype-overflow-classes: (
   visible, hidden, scroll
 ) !default;
 
+@mixin overflow($overflow) {
+    overflow: $overflow;
+}
+
+@mixin overflow-x($overflow) {
+    overflow-x: $overflow;
+}
+
+@mixin overflow-y($overflow) {
+    overflow-y: $overflow;
+}
+
 @mixin foundation-prototype-overflow {
   @each $overflow in $prototype-overflow-classes {
     .overflow-#{$overflow} {
-      overflow: $overflow;
+      @include overflow($overflow);
     }
     .overflow-x-#{$overflow} {
-      overflow-x: $overflow;
+      @include overflow-x($overflow);
     }
     .overflow-y-#{$overflow} {
-      overflow-y: $overflow;
+      @include overflow-y($overflow);
     }
   }
 
@@ -36,13 +48,13 @@ $prototype-overflow-classes: (
         @each $overflow in $prototype-overflow-classes {
           @if $size != $-zf-zero-breakpoint {
             .#{$size}-overflow-#{$overflow} {
-              overflow: $overflow;
+              @include overflow($overflow);
             }
             .#{$size}-overflow-x-#{$overflow} {
-              overflow-x: $overflow;
+              @include overflow-x($overflow);
             }
             .#{$size}-overflow-y-#{$overflow} {
-              overflow-y: $overflow;
+              @include overflow-y($overflow);
             }
           }
         }

diff --git a/scss/prototype/_position.scss b/scss/prototype/_position.scss
index d7e986a962a0386ec9640a25178a86bfc97ffb32..fc37e52940c5e34fc3ac9e2ea4688e67d2368773 100644 (file)
--- a/scss/prototype/_position.scss
+++ b/scss/prototype/_position.scss
@@ -36,16 +36,22 @@ $prototype-position-zindex: 975 !default;
   z-index: $prototype-position-zindex;
 }
 
+@mixin position($position) {
+  position: $position;
+} 
+
 @mixin foundation-prototype-position {
+  // Position: Static, Relative, Fixed, Absolute
   @each $position in $prototype-position-classes {
     .position-#{$position} {
-      position: $position;
+      @include position($position);
     }
   }
+  
+  // Position: Fixed Top, Fixed Bottom
   .position-fixed-top {
     @include position-fixed-top;
   }
-
   .position-fixed-bottom {
     @include position-fixed-bottom;
   }
@@ -58,10 +64,11 @@ $prototype-position-zindex: 975 !default;
         @each $position in $prototype-position-classes {
           @if $size != $-zf-zero-breakpoint {
             .#{$size}-position-#{$position} {
-              position: $position;
+              @include position($position);
             }
           }
         }
+
         // Position: Fixed Top, Fixed Bottom
         @if $size != $-zf-zero-breakpoint {
           .#{$size}-position-fixed-top {

diff --git a/scss/prototype/_text-decoration.scss b/scss/prototype/_text-decoration.scss
index 556d44bb7371ba8840d638d1b28608a75c484354..205dd9b2e0b4f60303585c0f2841cef3635f97ab 100644 (file)
--- a/scss/prototype/_text-decoration.scss
+++ b/scss/prototype/_text-decoration.scss
@@ -16,10 +16,14 @@ $prototype-text-decoration-classes: (
   overline, underline, line-through
 ) !default;
 
+@mixin text-decoration($decoration) {
+  text-decoration: $decoration;
+} 
+
 @mixin foundation-prototype-text-decoration {
   @each $decoration in $prototype-text-decoration-classes {
     .text-#{$decoration} {
-      text-decoration: $decoration;
+      @include text-decoration($decoration);
     }
   }
 
@@ -30,7 +34,7 @@ $prototype-text-decoration-classes: (
         @each $decoration in $prototype-text-decoration-classes {
           @if $size != $-zf-zero-breakpoint {
             .#{$size}-text-#{$decoration} {
-              text-decoration: $decoration;
+              @include text-decoration($decoration);
             }
           }
         }

diff --git a/scss/prototype/_text-transformation.scss b/scss/prototype/_text-transformation.scss
index 758ee8b4b18d51ec458bd8b542a032f2f8c7a7cf..a0c6902338008a14a7cbae2c0aab3544b96d1ded 100644 (file)
--- a/scss/prototype/_text-transformation.scss
+++ b/scss/prototype/_text-transformation.scss
@@ -16,10 +16,14 @@ $prototype-text-transformation-classes: (
   lowercase, uppercase, capitalize
 ) !default;
 
+@mixin text-transform($transformation) {
+  text-transform: $transformation;
+} 
+
 @mixin foundation-prototype-text-transformation {
   @each $transformation in $prototype-text-transformation-classes {
     .text-#{$transformation} {
-      text-transform: $transformation;
+      @include text-transform($transformation);
     }
   }
 
@@ -30,7 +34,7 @@ $prototype-text-transformation-classes: (
         @each $transformation in $prototype-text-transformation-classes {
           @if $size != $-zf-zero-breakpoint {
             .#{$size}-text-#{$transformation} {
-                             text-transform: $transformation;
+                             @include text-transform($transformation);
                            }
           }
         }