amélioration du mixant "respond-to()"

bower.json

@@ -1,6 +1,6 @@
 {
   "name": "KNACSS",
-  "version": "6.1.0",
+  "version": "6.1.1",
   "homepage": "http://www.knacss.com/",
   "authors": [
     "Raphaël GOETTER, Alsacreations"

changelog.md

@@ -1,3 +1,6 @@
+# changelog v6.1.1 (21 avril 2017)
+- amélioration du mixin "respond-to()"
+
 # changelog v6.1.0 (3 mars 2017)
 - passage à [Normalize 5.0.0](https://github.com/necolas/normalize.css/blob/5.0.0/CHANGELOG.md)
 - ajout de variables pour tailles de polices différentes sur petits et sur grands écrans (`$h1-size` et `$h1-size-l` par exemple). Par défaut, les tailles "mobile" sont appliquées, et les tailles "desktop" s'appliquent en min-width `$tiny +1`

package.json

@@ -1,6 +1,6 @@
 {
   "name": "knacss",
-  "version": "6.1.0",
+  "version": "6.1.1",
   "homepage": "http://www.knacss.com/",
   "bugs": "https://github.com/alsacreations/KNACSS/issues",
   "author": [

sass/_config/_mixins.scss

@@ -1,44 +1,32 @@
 // Additionnal "utility" breakpoints aliases
 // ex. @include respond-to("medium-up") {...}
-@function breakpoint($bp) {
+$bp-aliases: (
-  @if $bp == 'tiny' {
+  'tiny'   : (max-width: #{$tiny}),
-    @return '(max-width: #{$tiny})';
+  'small'  : (max-width: #{$small}),
-  }
+  'medium' : (max-width: #{$medium}),
-  @else if $bp == 'small' {
+  'large' : (max-width: #{$large}),
-    @return '(max-width: #{$small})';
+  'extra-large'  : (max-width: #{$extra-large}),
-  }
+  'tiny-up'   : (min-width: #{$tiny + 1}),
-  @else if $bp == 'medium' {
+  'small-up'  : (min-width: #{$small + 1}),
-    @return '(max-width: #{$medium})';
+  'medium-up' : (min-width: #{$medium + 1}),
-  }
+  'large-up' : (min-width: #{$large + 1}),
-  @else if $bp == 'large' {
+  'extra-large-up' : (min-width: #{$extra-large + 1}),
-    @return '(max-width: #{$large})';
+  'retina' : (min-resolution: 2dppx)
-  }
+);
-  @else if $bp == 'extra-large' {
-    @return '(max-width: #{$extra-large})';
-  }
-  @else if $bp == 'tiny-up' {
-    @return '(min-width: #{$tiny + 1})';
-  }
-  @else if $bp == 'small-up' {
-    @return '(min-width: #{$small + 1})';
-  }
-  @else if $bp == 'medium-up' {
-    @return '(min-width: #{$medium + 1})';
-  }
-  @else if $bp == 'large-up' {
-    @return '(min-width: #{$large + 1})';
-  }
-  @else if $bp == 'extra-large-up' {
-    @return '(min-width: #{$extra-large + 1})';
-  }
-  @else if $bp == 'retina' {
-    @return '(-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi), (min-resolution: 2dppx)';
-  }
-}
 
-@mixin respond-to($value) {
+// Source : https://www.sitepoint.com/managing-responsive-breakpoints-sass/
-  $string: breakpoint($value);
+@mixin respond-to($name) {
-  @media screen and #{$string} {
+  // If the key exists in the map
-    @content;
+  @if map-has-key($bp-aliases, $name) {
+    // Prints a media query based on the value
+    @media #{inspect(map-get($bp-aliases, $name))} {
+      @content;
+    }
+  }
+
+  // If the key doesn't exist in the map
+  @else {
+    @warn "Unfortunately, no value could be retrieved from `#{$breakpoint}`. "
+        + "Please make sure it is defined in `$breakpoints` map.";
   }
 }

sass/knacss.scss

@@ -1,5 +1,5 @@
 /*!
-* www.KNACSS.com V6.0.5 (1er décembre 2016) @author: Alsacreations, Raphael Goetter
+* www.KNACSS.com v6.1.1 (21 avril 2017) @author: Alsacreations, Raphael Goetter
 * Licence WTFPL http://www.wtfpl.net/
 */