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

sass/_config/_mixins.scss

@@ -1,44 +1,32 @@
 // Additionnal "utility" breakpoints aliases
 // ex. @include respond-to("medium-up") {...}
-@function breakpoint($bp) {
-  @if $bp == 'tiny' {
-    @return '(max-width: #{$tiny})';
-  }
-  @else if $bp == 'small' {
-    @return '(max-width: #{$small})';
-  }
-  @else if $bp == 'medium' {
-    @return '(max-width: #{$medium})';
-  }
-  @else if $bp == 'large' {
-    @return '(max-width: #{$large})';
-  }
-  @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)';
-  }
-}
+$bp-aliases: (
+  'tiny'   : (max-width: #{$tiny}),
+  'small'  : (max-width: #{$small}),
+  'medium' : (max-width: #{$medium}),
+  'large' : (max-width: #{$large}),
+  'extra-large'  : (max-width: #{$extra-large}),
+  'tiny-up'   : (min-width: #{$tiny + 1}),
+  'small-up'  : (min-width: #{$small + 1}),
+  'medium-up' : (min-width: #{$medium + 1}),
+  'large-up' : (min-width: #{$large + 1}),
+  'extra-large-up' : (min-width: #{$extra-large + 1}),
+  'retina' : (min-resolution: 2dppx)
+);
 
-@mixin respond-to($value) {
-  $string: breakpoint($value);
-  @media screen and #{$string} {
-    @content;
+// Source : https://www.sitepoint.com/managing-responsive-breakpoints-sass/
+@mixin respond-to($name) {
+  // If the key exists in the map
+  @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/
 */