Fix -zf-each-breakpoint without small bp

`$breakpoint-classes` is a list, not a map.

Use `sl-remove()` from SassyList
(https://github.com/at-import/SassyLists) instead of `map-remove()` to
remove the small breakpoint from `$breakpoint-classes`.

Other changes:
- Rename `$map` to `$list`.
- Rename `$size` to `$name`. `$breakpoint-classes` contains breakpoint
names, not sizes. Keep `$-zf-size` for compatibility.

diff --git a/gulp/config.js b/gulp/config.js
index 74d2de5a02ebe5548b50258e77007b93b6a12a86..32abf73b1e63f018a7c494c29d0975d53a3d19fb 100644 (file)
--- a/gulp/config.js
+++ b/gulp/config.js
@@ -23,7 +23,8 @@ module.exports = {
 
   // Sass
   SASS_DEPS_FILES: [
-    'node_modules/@(normalize-scss)/sass/**/*.scss'
+    'node_modules/@(normalize-scss)/sass/**/*.scss',
+    'node_modules/@(sassy-lists)/stylesheets/**/*.scss'
   ],
 
   SASS_DOC_PATHS: [

diff --git a/gulp/tasks/customizer.js b/gulp/tasks/customizer.js
index 3685222a02d1efd1c08b04654bd5403c06c2a03a..408787e6c13b90c5f9561db4277968dd744dec50 100644 (file)
--- a/gulp/tasks/customizer.js
+++ b/gulp/tasks/customizer.js
@@ -49,7 +49,8 @@ gulp.task('customizer:loadConfig', function(done) {
 // Prepare dependencies
 gulp.task('customizer:prepareSassDeps', function() {
   return gulp.src([
-      'node_modules/@(normalize-scss)/sass/**/*.scss'
+      'node_modules/@(normalize-scss)/sass/**/*.scss',
+      'node_modules/@(sassy-lists)/stylesheets/**/*'
     ])
     .pipe(gulp.dest('_vendor/scss'));
 });

diff --git a/package.json b/package.json
index 5e79dc969f4a5501d0228384882addb167c26fa4..32fde7d037704d794935f71da5cb110195a926b5 100644 (file)
--- a/package.json
+++ b/package.json
@@ -83,6 +83,7 @@
     "rimraf": "^2.3.2",
     "run-sequence": "^1.1.4",
     "sass-true": "^2.0.3",
+    "sassy-lists": "^3.0.0",
     "sinon": "^1.17.3",
     "supercollider": "^1.4.0",
     "touch": "^1.0.0",

diff --git a/scss/foundation.scss b/scss/foundation.scss
index d0c58689cf614531ef58039c76af87bdfd77224f..d41471413648d3b270483f3a02d8b7bac7bc87c1 100644 (file)
--- a/scss/foundation.scss
+++ b/scss/foundation.scss
@@ -7,6 +7,7 @@
 
 // Dependencies
 @import "../_vendor/scss/normalize-scss/sass/normalize";
+@import "../_vendor/scss/sassy-lists/stylesheets/SassyLists";
 
 // Settings
 // import your own `settings` here or

diff --git a/scss/util/_mixins.scss b/scss/util/_mixins.scss
index 8959ebdf0dbb4d42418e986aaf0b6aaa239bf29b..b32e2c95fb21c74e2616620e696a2598a900332e 100644 (file)
--- a/scss/util/_mixins.scss
+++ b/scss/util/_mixins.scss
@@ -228,16 +228,16 @@
 ///
 /// @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;
+  $list: $breakpoint-classes;
 
   @if not $small {
-    $map: map-remove($map, $-zf-zero-breakpoint);
+    $list: sl-remove($list, $-zf-zero-breakpoint);
   }
 
-  @each $size in $map {
-    $-zf-size: $size !global;
+  @each $name in $list {
+    $-zf-size: $name !global;
 
-    @include breakpoint($size) {
+    @include breakpoint($name) {
       @content;
     }
   }