Added mediaOnly mixin (#28)

* Added mediaOnly mixin

* Fixed CI errors

* Fixed CI errors.

* Fixed little bug.

* Added case for default only

* Enhancement to not allow greater-than queries for breakpoints that don't exist.

* Removed unit px

scss/tools/_media.scss

@@ -22,6 +22,13 @@ $media-breakpoints: $breakpoints !default;
     }
 }
 
+// Media only automatically create a "only screen and(min-width: $minvalue) and (max-width: $maxvalue)" media query.
+@mixin mediaOnly($minvalue, $maxvalue) {
+    @media only screen and (min-width: $minvalue) and (max-width: $maxvalue) {
+        @content;
+    }
+}
+
 // Media mixin for easier readable media queries.
 //
 // Usage:
@@ -30,6 +37,10 @@ $media-breakpoints: $breakpoints !default;
 //     @include media('<tablet') {
 //         color: red;
 //     }
+//
+//     @include media('laptop') {
+//         color: blue;
+//     }
 // }
 //
 // Output:
@@ -39,12 +50,24 @@ $media-breakpoints: $breakpoints !default;
 //         color: red;
 //     }
 // }
+//
+// @media only screen and (min-width: 992px) and (max-width: 1199px) {
+//     .example {
+//         color: blue;
+//     }
+// }
 @mixin media($condition) {
     $function: str-slice($condition, 1, 1);
     $currentBreakpoint: str-slice($condition, 2);
 
     @if $function == '>' {
-        @include mediaMin(map-get($media-breakpoints, $currentBreakpoint) + 1px) {
+        $value: map-get($media-breakpoints, $currentBreakpoint);
+
+        @if not $value {
+            @error 'Following condition is not allowed: #{$condition}';
+        }
+
+        @include mediaMin($value + 1) {
             @content;
         }
     } @else if $function == '<' {
@@ -64,7 +87,40 @@ $media-breakpoints: $breakpoints !default;
             @content;
         }
     } @else {
-        @error 'Following condition is not allowed: #{$condition}';
+        @if $condition == 'default' {
+            $maxBreakpoint: 0;
+
+            @each $name, $breakpoint in $media-breakpoints {
+                @if $breakpoint > $maxBreakpoint {
+                    $maxBreakpoint: $breakpoint;
+                }
+            }
+
+            @if $maxBreakpoint > 0 {
+                $maxBreakpoint: $maxBreakpoint + 1;
+            }
+
+            @include mediaMin($maxBreakpoint) {
+                @content;
+            }
+        } @else {
+            $maxvalue: map-get($media-breakpoints, $condition);
+            $minvalue: 0;
+
+            @if not $maxvalue {
+                @error 'Following condition is not allowed: #{$condition}';
+            }
+
+            @each $name, $breakpoint in $media-breakpoints {
+                @if $breakpoint > $minvalue and $breakpoint < $maxvalue {
+                    $minvalue: $breakpoint + 1;
+                }
+            }
+
+            @include mediaOnly($minvalue, $maxvalue) {
+                @content;
+            }
+        }
     }
 }