Add utility mixin to iterate through breakpoints. This makes our commonly used @each...

diff --git a/scss/grid/_classes.scss b/scss/grid/_classes.scss
index 46a2ab5847259ddcd9846a2b2954d1afa4c8997d..d56684fb53b6227b183af620b4eecb3ba7d6075e 100644 (file)
--- a/scss/grid/_classes.scss
+++ b/scss/grid/_classes.scss
@@ -20,8 +20,7 @@
   $uncollapse: 'uncollapse',
   $offset: 'offset',
   $end: 'end',
-  $expanded: 'expanded',
-  $breakpoints: $breakpoint-classes
+  $expanded: 'expanded'
 ) {
   // Row
   .#{$row} {
@@ -41,19 +40,6 @@
       }
     }
 
-    // Responsive collapsing
-    @each $size in $breakpoint-classes {
-      @include breakpoint($size) {
-        &.#{$size}-#{$collapse} {
-          > .#{$column} { @include grid-col-collapse; }
-        }
-
-        &.#{$size}-#{$uncollapse} {
-          > .#{$column} { @include grid-col-uncollapse; }
-        }
-      }
-    }
-
     // Expanded (full-width) row
     &.#{$expanded} {
       max-width: none;
@@ -85,52 +71,59 @@
     }
   }
 
-  @each $size in $breakpoints {
-    @include breakpoint($size) {
-      @for $i from 1 through $grid-column-count {
-        // Column width
-        .#{$size}-#{$i} {
-          @include grid-col-size($i);
-        }
-
-        // Source ordering
-        @if $i < $grid-column-count {
-          .#{$size}-#{$push}-#{$i} {
-            @include grid-col-pos($i);
-          }
+  @include -zf-each-breakpoint {
+    @for $i from 1 through $grid-column-count {
+      // Column width
+      .#{$-zf-size}-#{$i} {
+        @include grid-col-size($i);
+      }
 
-          .#{$size}-#{$pull}-#{$i} {
-            @include grid-col-pos(-$i);
-          }
+      // Source ordering
+      @if $i < $grid-column-count {
+        .#{$-zf-size}-#{$push}-#{$i} {
+          @include grid-col-pos($i);
         }
 
-        // Offsets
-        $o: $i - 1;
-
-        .#{$size}-#{$offset}-#{$o} {
-          @include grid-col-off($o);
+        .#{$-zf-size}-#{$pull}-#{$i} {
+          @include grid-col-pos(-$i);
         }
       }
 
-      // Block grid
-      @for $i from 1 through $block-grid-max {
-        .#{$size}-up-#{$i} {
-          @include grid-layout($i);
-        }
-      }
+      // Offsets
+      $o: $i - 1;
 
-      // Positioning
-      .#{$size}-#{$center} {
-        @include grid-col-pos(center);
+      .#{$-zf-size}-#{$offset}-#{$o} {
+        @include grid-col-off($o);
       }
+    }
 
-      // Gutter adjustment
-      .#{$size}-#{$uncenter},
-      .#{$size}-#{$push}-0,
-      .#{$size}-#{$pull}-0 {
-        @include grid-col-unpos;
+    // Block grid
+    @for $i from 1 through $block-grid-max {
+      .#{$-zf-size}-up-#{$i} {
+        @include grid-layout($i);
       }
     }
+
+    // Responsive collapsing
+    &.#{$-zf-size}-#{$collapse} {
+      > .#{$column} { @include grid-col-collapse; }
+    }
+
+    &.#{$-zf-size}-#{$uncollapse} {
+      > .#{$column} { @include grid-col-uncollapse; }
+    }
+
+    // Positioning
+    .#{$-zf-size}-#{$center} {
+      @include grid-col-pos(center);
+    }
+
+    // Gutter adjustment
+    .#{$-zf-size}-#{$uncenter},
+    .#{$-zf-size}-#{$push}-0,
+    .#{$-zf-size}-#{$pull}-0 {
+      @include grid-col-unpos;
+    }
   }
 
   @if $column == 'column' {

diff --git a/scss/util/_mixins.scss b/scss/util/_mixins.scss
index 6bc6841fdb756f0b58de221e3a21294273521ebf..f097a7ce2d10ee2cf44f1fe7025e71176de0ed46 100644 (file)
--- a/scss/util/_mixins.scss
+++ b/scss/util/_mixins.scss
@@ -208,3 +208,22 @@
 @mixin v-align-middle {
   @include vertical-center;
 }
+
+/// Iterates through breakpoints defined in `$breakpoint-classes` and prints the CSS inside the mixin at each breakpoint's media query. Use this with the grid, or any other component that has responsive classes.
+///
+/// @param {Boolean} $small [true] - If `false`, the mixin will skip the `small` breakpoint. Use this with components that don't prefix classes with `small-`, only `medium-` and up.
+@mixin -zf-each-breakpoint($small: true) {
+  $map: $breakpoint-classes;
+
+  @if not $small {
+    $map: map-remove($map, small);
+  }
+
+  @each $size in $map {
+    $-zf-size: $size !global;
+
+    @include breakpoint($size) {
+      @content;
+    }
+  }
+}