Add mechanism to iterate over breakpoints without automatically inserting them

diff --git a/scss/util/_mixins.scss b/scss/util/_mixins.scss
index 60585ca693a702edf0eb214303df84a8956a52e8..b39c9022853af81ca841048167b32b3a39917244 100644 (file)
--- a/scss/util/_mixins.scss
+++ b/scss/util/_mixins.scss
@@ -99,7 +99,7 @@
     background: $color;
     box-shadow: $shadow;
 
-    content: '';    
+    content: '';
   }
 
   // Hover state
@@ -234,7 +234,8 @@
 /// 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) {
+/// @param {Boolean} $auto-insert-breakpoints [true] - If `false`, the mixin will iterate over breakpoints without doing the media query itself. Useful for more complex media query generation as in the margin grid.
+@mixin -zf-each-breakpoint($small: true, $auto-insert-breakpoints: true) {
   $list: $breakpoint-classes;
 
   @if not $small {
@@ -244,7 +245,11 @@
   @each $name in $list {
     $-zf-size: $name !global;
 
-    @include breakpoint($name) {
+    @if $auto-insert-breakpoints {
+      @include breakpoint($name) {
+        @content;
+      }
+    } @else {
       @content;
     }
   }