From 45d33352ec03a0925a326ccc9a624fdd6a54ecf4 Mon Sep 17 00:00:00 2001
From: Antonio Ospite <ao2@ao2.it>
Date: Sat, 8 Jul 2017 15:50:43 +0200
Subject: [PATCH] Add a respond-to() mixin to apply media queries using
 meaningful aliases

The respond-to() mixin introduced by http://breakpoint-sass.com/
improves the readability of the source stylesheet allowing to apply
media queries using meaningful names instead of numbers.

Add such mechanism to megatyoe too.

The code is heavily inspired by http://breakpoint-sass.com/ this should
be OK because its license is MIT and hence compatible with megatypes.

Fixes Issue #37
---
 megatype/_config.scss | 18 +++++++++++++++
 megatype/_media.scss  | 52 +++++++++++++++++++++++++++++++++++++++++++
 2 files changed, 70 insertions(+)

diff --git a/megatype/_config.scss b/megatype/_config.scss
index 70abaf6..029d5fd 100644
--- a/megatype/_config.scss
+++ b/megatype/_config.scss
@@ -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)
diff --git a/megatype/_media.scss b/megatype/_media.scss
index 94854e5..596727b 100644
--- a/megatype/_media.scss
+++ b/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;
+    }
+}