Add respond-to mixin

megatype/_config.scss

@@ -61,7 +61,7 @@ $baseline-scaling: false !default;
 // enable formal baseline grid
 // snaps all type to the baseline grid
 // for best results, declare spacing and leading using unitless numbers in typeset mixin
-// can be disabled per-typeset mixin by passing last paramter ($snap) as false
+// can be disabled per-typeset mixin by passing last parameter ($snap) as false
 $baseline-snap: true !default;
 
 // baseline subdivisions specify a fraction of the grid that type can be snapped to.
@@ -98,6 +98,24 @@ $breakpoint-map: (
     )
 ) !default;
 
+// map for semantic retrieval of brekpoints
+//
+// The key is the alias, and the value is a list of two values (min, max)
+// meant to be the arguments of the media() mixin.
+$breakpoint-aliases: (
+    // basic min-max aliases
+    'xs': (0, 1),
+    's':  (1, 2),
+    'm':  (2, 3),
+    'l':  (3, 4),
+    'xl': (4, 0),
+) !default;
+
+// More aliases can be added with the add-breakpoint-alias() mixin.
+//@include add-breakpoint-alias('medium screen', (1, 3));
+//@include add-breakpoint-alias('large screen', (3, 0));
+//@include add-breakpoint-alias('medium or large screen', (1, 0));
+
 // default breakpoint. This is where the default html font size will be set,
 // media queries will be generated to either side to apply rootsizes at remaining breakpoints
 // eg: for mobile first set this to 0, for desktop first set this to your largest breakpoint (with this config, 4)

megatype/_media.scss

@@ -141,3 +141,55 @@
         }
     }
 }
+
+// add breakpoint aliases that can be be used with the respond-to() mixin.
+@mixin add-breakpoint-alias($alias, $breakpoint-range, $overwrite: false) {
+    $output: ($alias: $breakpoint-range);
+
+    @if type-of($breakpoint-range) != 'list' or length($breakpoint-range) != 2 {
+        @warn "Your breakpoint range must be a list of exactly two values, corresponding to the parameters of the media() mixin.";
+    }
+    @else if length($breakpoint-aliases) == 0 {
+        $breakpoint-aliases: $output !global;
+    }
+    @else {
+        @if map-has-key($breakpoint-aliases, $alias) and $overwrite != true {
+            @warn "You already have a breakpoint aliased to `#{$alias}`, please choose another breakpoint alias, or pass in `$overwrite: true` to overwrite the previous breakpoint.";
+            $breakpoint-aliases: $breakpoint-aliases !global;
+        }
+        @else if not map-has-key($breakpoint-aliases, $alias) or $overwrite == true {
+            $breakpoint-aliases: map-merge($breakpoint-aliases, $output) !global;
+        }
+    }
+}
+
+// respond to named breakpoints, code based on http://breakpoint-sass.com/
+@mixin respond-to($alias) {
+    @if type-of($breakpoint-aliases) != 'map' {
+        // Just in case someone writes gibberish to the $breakpoints variable.
+        @warn "Your breakpoint aliases aren't a map! `respond-to` expects a map. Please check the value of $breakpoint-aliases variable.";
+        @content;
+    }
+    @else if map-has-key($breakpoint-aliases, $alias) {
+        $breakpoint-range: map-get($breakpoint-aliases, $alias);
+        @if type-of($breakpoint-range) != 'list' or length($breakpoint-range) != 2 {
+            @warn "Your breakpoint range must be a list of exactly two values, corresponding to the parameters of the media() mixin.";
+            @content;
+        }
+        @else {
+            $min: nth($breakpoint-range, 1);
+            $max: nth($breakpoint-range, 2);
+            @include media($min, $max) {
+                @content;
+            }
+        }
+    }
+    @else if not map-has-key($breakpoint-aliases, $alias) {
+        @warn "`#{$alias}` isn't a defined breakpoint! Please add it using `$breakpoints: add-breakpoint(`#{$alias}`, $value);`";
+        @content;
+    }
+    @else {
+        @warn "You haven't created any breakpoints yet! Make some already! `@include add-breakpoint-alias($alias, $breakpoint-range)`";
+        @content;
+    }
+}