From: Kevin Ball <kmball11@gmail.com>
Date: Thu, 25 May 2017 20:46:41 +0000 (-0700)
Subject: Add mechanism to iterate over breakpoints without automatically inserting them
X-Git-Tag: v6.4.0-rc1~9^2~64
X-Git-Url: http://git.ipfire.org/?a=commitdiff_plain;h=3fe27309596c50505b6b0960ccdd376c62bfff49;p=thirdparty%2Ffoundation%2Ffoundation-sites.git

Add mechanism to iterate over breakpoints without automatically inserting them
---

diff --git a/scss/util/_mixins.scss b/scss/util/_mixins.scss
index 60585ca69..b39c90228 100644
--- 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;
     }
   }