Improves media query mixins and functions.

Author: AMJones

scss/_base.scss

@@ -7,6 +7,6 @@
 
 // Mixins
 @import "mixins/media-query";
-@import "mixins/vendor-prefixes";
 @import "mixins/rounding";
 @import "base-mixins";
+@import "mixins/bs4-shim";

scss/mixins/_bs4-shim.scss

@@ -0,0 +1,22 @@
+@import "media-query";
+
+@mixin media-breakpoint-up($bp) {
+  @include media("screen", ">=#{$bp}") {
+    @content;
+  }
+}
+
+@mixin media-breakpoint-down($bp) {
+  @include media("screen", "<=#{$bp}") {
+    @content;
+  }
+}
+
+// Note: This mixin is for legacy bootstrap code that calls it.  Vendor prefixes aren't needed for opacity.
+@mixin opacity($o) {
+  opacity: $o;
+}
+
+@mixin user-select($value) {
+  user-select: $value;
+}

scss/mixins/_media-query.scss

@@ -1,10 +1,16 @@
+@import "../variables/root-variables";
+@import "../functions/functions";
+@import "../functions/map";
+
 
 @function get-expression-operator($expression) {
   @each $operator in ('>=', '<=', '>', '<', '≥', '≤', '=') {
     @if str-index($expression, $operator) {
       @return $operator;
     }
   }
+
+  @return '';
 }
 
 @function get-expression-value($expression, $operator) {
@@ -13,60 +19,69 @@
   @return $value;
 }
 
+@function get-width-string($operator, $min: 0, $max: 0) {
+  @if $operator == '≥' {  $operator: '>='; }
+  @if $operator == '≤' {  $operator: '<='; }
+  @if $operator == '=' {
+    @if $max > 0 {
+      @return ' (min-width: ' + $min + ') and (max-width: ' + $max + ')';
+    } @else {
+      @return ' (min-width: ' + $min + ')';
+    }
+  } @else if $operator == '<' {
+    @return ' (max-width: ' + ($min - 1) + ')';
+  } @else if $operator == '>' {
+    @return ' (min-width: ' + ($max + 1) + ')';
+  } @else if $operator == '<=' {
+    @return ' (max-width: ' + $max + ')';
+  } @else if $operator == '>=' {
+    @return ' (min-width: ' + $min + ')';
+  }
+
+  @return '';
+}
+
 @function get-condition-string($viewport,$operator) {
   @each $class, $min in $grid-breakpoints {
     @if($class == $viewport) {
       $max: map-get-next($grid-breakpoints,$class, 0);
-      @if $operator == '≥' {  $operator: '>='; }
-      @if $operator == '≤' {  $operator: '<='; }
-      @if $operator == '=' {
-        @if $max > 0 {
-          @return ' (min-width: ' + $min + ') and (max-width: ' + $max + ')';
-        } @else {
-          @return ' (min-width: ' + $min + ')';
-        }
-      } @else if $operator == '<' {
-        @return ' (max-width: ' + ($min - 1) + ')';
-      } @else if $operator == '>' {
-        @return ' (min-width: ' + ($max + 1) + ')';
-      } @else if $operator == '<=' {
-        @return ' (max-width: ' + $max + ')';
-      } @else if $operator == '>=' {
-        @return ' (min-width: ' + $min + ')';
-      }
+      @return get-width-string($operator,$min,$max);
     }
   }
 
   @return '';
 }
 
-// Used with @include media("<sm",">xs") etc.
-@mixin media($conditions...) {
-  $condition-string: '';
+@function _media($conditions...) {
+  $conditions-string: "";
   @each $condition in $conditions {
-    $operator: get-expression-operator($condition);
-    $value: get-expression-value($condition, $operator);
-    $condition-string: $condition-string + get-condition-string($value,$operator);
-  }
-  @media screen and #{$condition-string} {
-    @content
+    // Basic String Conditions
+    @if map-has-key($condition-map, $condition) {
+      $conditions-string: $conditions-string + map-get($condition-map,$condition);
+    } @else {
+      $operator: get-expression-operator($condition);
+      $value: get-expression-value($condition,$operator);
+      // Breakpoint Based Conditions
+      @if map-has-key($grid-breakpoints, $value) {
+        $conditions-string: $conditions-string + get-condition-string($value,$operator);
+      } @else {
+        $conditions-string: $conditions-string + get-width-string($operator,$value,$value);
+      }
+    }
   }
-}
 
-@mixin media-breakpoint-up($bp) {
-  @include media(">=#{$bp}") {
-    @content;
-  }
+  @return $conditions-string;
 }
 
-@mixin media-breakpoint-down($bp) {
-  @include media("<=#{$bp}") {
+// Used with @include media("<sm",">xs") etc.
+@mixin media($conditions...) {
+  @media #{_media($conditions)} {
     @content;
   }
 }
 
 @mixin touch() {
-  html.touch {
+  @media #{_media("screen", "touch")} {
     @content;
   }
 }

scss/mixins/_vendor-prefixes.scss

@@ -1,8 +0,0 @@
-// Note: This mixin is for legacy bootstrap code that calls it.  Vendor prefixes aren't needed for opacity.
-@mixin opacity($o) {
-  opacity: $o;
-}
-
-@mixin user-select($value) {
-  user-select: $value;
-}

scss/variables/_root-variables.scss

@@ -74,6 +74,15 @@ $container-max-widths: (
      xl: 1140px
                        ) !default;
 
+$condition-map: (
+    "screen": "screen",
+    "print" : "print",
+    "coarse": "(pointer: fine)",
+    "touch" : "(pointer: coarse), (-moz-touch-enabled)",
+    "fine"  : "(pointer: fine), not all and (-moz-touch-enabled)",
+    "hidpi" : "(-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi)"
+);
+
 // endregion ////////////////////////////////////////////////////////////   End Breakpoint & Grid
 
 // region ///////////////////////////////////////////////////////////////  Utility Variables