Add UI scale mixin support

src/support/mixins/layout.scss

@@ -40,6 +40,33 @@
   }
 }
 
+// UI scale
+
+@mixin ui-scale($ui-scale) {
+  @if $ui-scale == "" {
+    @content;
+  }
+
+  @else {
+    // Retrieves the value from the key
+    $value: map-get($ui-scales, $ui-scale);
+
+    // If the key exists in the map
+    @if $value != null {
+      // Prints a media query based on the value
+      @media ($value) {
+        @content;
+      }
+    }
+
+    // If the key doesn't exist in the map
+    @else {
+      @warn "Unfortunately, no value could be retrieved from `#{$ui-scale}`. "
+        + "Please make sure it is defined in `$ui-scales` map.";
+    }
+  }
+}
+
 // Clearfix
 //
 // Clears floats via mixin.

src/support/variables/layout.scss

@@ -141,3 +141,9 @@ $responsive-positions: (
   fixed,
   sticky
 ) !default;
+
+// UI scales
+$ui-scales: (
+  normal: "pointer: fine",
+  large: "pointer: coarse"
+) !default;