Renames media query function, allows function to work with media-type-only queries.

Author: AMJones

scss/_rwd-functions.scss

@@ -1,12 +1,6 @@
 @import "rwd-variables";
 @import "strapless/base/scss/base";
 
-// region //////////////////////////////////////////////// String Functions
-
-
-
-// endregion ///////////////////////////////////////////// End String Functions
-
 // region //////////////////////////////////////////////// Breakpoint Functions
 
 // Returns -breakpoint for adding into class selectors.
@@ -146,14 +140,21 @@
 // region //////////////////////////////////////////////// Selector/Media Targeting Functions
 
 // Returns media query for the given conditions.
-@function _media($conditions...) {
+@function media-condition($conditions...) {
   $compiled-list: ();
   @for $i from 1 through length($conditions) {
     $condition: unquote(quote(nth($conditions,$i)));
-
     // Basic String Conditions
     @if map-has-key($condition-map, $condition) {
-      $compiled-list: append( $compiled-list, map-get( $condition-map,$condition ), comma );
+      $pre: map-get($condition-map,$condition);
+      @if(type-of($pre) == list) {
+       @for $ii from 1 through length($pre) {
+         $part: unquote(quote(nth($pre,$ii)));
+         $compiled-list: append( $compiled-list, $part, comma );
+       }
+      } @else {
+        $compiled-list: append( $compiled-list, map-get( $condition-map,$condition ), comma );
+      }
     } @else {
       $operator: get-expression-operator($condition);
       $value: get-expression-value($condition,$operator);
@@ -173,17 +174,8 @@
     $last: if($i > 1, nth($compiled-list, $i - 1), null);
     $sep: '';
 
-    @if $i == 1 and $conditions-string == '' and not(is-media-type($this)) {
-      $last: all;
-      $conditions-string: all;
-    }
-
     @if $conditions-string != '' {
-      @if is-media-type($last) and not(is-media-type($this)) {
-        $sep: unquote(" and ");
-      } @else {
-        $sep: unquote(", ");
-      }
+      $sep: unquote(", ");
     }
 
     $conditions-string: $conditions-string + $sep + $this;

scss/_rwd-mixins.scss

@@ -1,12 +1,17 @@
 @import "rwd-variables";
 @import "rwd-functions";
 
+// Inserts a psuedo-element used to detect the current breakpoint.
+@mixin responsive-breakpoint($breakpoint) {
+  body::before { content: "#{$breakpoint}"; display: none !important; }
+}
+
 // Wraps the given content in the appropriate media
 // query for the given conditions.  If no media type
 // is included in the conditions, the 'all' media type
 // is used.
 @mixin media($conditions...) {
-  @media #{_media($conditions...)} {
+  @media #{media-condition($conditions...)} {
     @content;
   }
 }
@@ -15,7 +20,7 @@
 // devices without a 'fine' pointing device.  On Firefox
 // browsers, this may include all touch devices.
 @mixin only-touch() {
-  @media #{_media("screen", "touch")} {
+  @media #{media-condition("touch")} {
     @content;
   }
 }

scss/_rwd-variables.scss

@@ -1,4 +1,6 @@
 
+$enable-framework:  false;
+
 // region //////////////////////////////////////////////// Breakpoints
 
 $grid-breakpoints: (
@@ -23,11 +25,11 @@ $container-max-widths: (
 // Media Query Targets
 $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)"
+        "print" : "print",
+        "coarse": "screen and (pointer: coarse)",
+        "touch" : ("handheld", "screen and (pointer: coarse)", "screen and (-moz-touch-enabled)"),
+        "fine"  : ("screen and (pointer: fine)", "not (-moz-touch-enabled)"),
+        "hidpi" : ("screen and (-webkit-min-device-pixel-ratio: 1.5)", "screen and (min-resolution: 144dpi)")
 );
 
 // Feature-Based Targets (requires d.js)

scss/_rwd.scss

@@ -1,2 +1,11 @@
 
-@import "rwd-mixins";
+@import "rwd-mixins";
+
+// If not in framework, output responsive breakpoint detection.
+@if variable-exists(enable-framework) {
+  @if not($enable-framework) {
+    @each $bp, $min in $grid-breakpoints {
+      @include responsive-breakpoint($bp);
+    }
+  }
+}