Structuring

mixins/queries/_01-mixins-media-queries.scss

@@ -1,46 +0,0 @@
-/*
-
-Widths
-
-*/
-
-$phone-width: 480px;
-$tablet-width: 768px;
-$notebook-width: 1024px;
-$desktop-width: 1280px;
-
-/*
-
-Queries
-
-*/
-@mixin phone {
-  @media(max-width: $tablet-width) {
-    @content
-  }
-}
-
-@mixin tablet {
-  @media /*(min-width: $tablet-width) and*/
-  (max-width: $notebook-width) {
-    @content
-  }
-}
-
-@mixin notebook {
-  @media(min-width: $notebook-width) and (max-width: $desktop-width) {
-    @content
-  }
-}
-
-@mixin desktop {
-  @media(min-width: $desktop-width) {
-    @content
-  }
-}
-
-@mixin print {
-  @media print {
-    @content
-  }
-}

mixins/queries/media-queries.scss

@@ -0,0 +1,91 @@
+/*
+
+CONSTANTS
+
+*/
+
+$UPWARDS-OPEN: 2;
+$DOWNWARDS-OPEN: 1;
+$LIMITED: 0;
+
+/*
+
+Widths
+
+*/
+
+$phone-width: 480px;
+$tablet-width: 768px;
+$notebook-width: 980px;
+$desktop-width: 1280px;
+
+/*
+
+Queries
+
+*/
+
+@mixin small-phone($direction:0) {
+  @include querybuilder(0, $phone-width, $direction) {
+    @content
+  }
+}
+
+@mixin phone($direction:0) {
+  @include querybuilder($phone-width, $tablet-width, $direction) {
+    @content
+  }
+}
+
+@mixin tablet($direction:0) {
+  @include querybuilder($tablet-width, $notebook-width, $direction) {
+    @content
+  }
+}
+
+@mixin notebook($direction:0) {
+  @include querybuilder($notebook-width, $desktop-width, $direction) {
+    @content
+  }
+}
+
+@mixin desktop($direction:0) {
+  @include querybuilder($desktop-width, 99999, $direction) {
+    @content
+  }
+}
+
+@mixin print {
+  @media print {
+    @content
+  }
+}
+
+/*
+
+QUERY-BUILDER
+
+*/
+
+@mixin querybuilder($low-px, $high-px, $direction) {
+  @if $direction == $LIMITED {
+    @media (min-width: $low-px) and (max-width: $high-px - 1) {
+      @content
+    }
+  } @else if ($direction == $DOWNWARDS-OPEN) {
+    @media (max-width: $high-px - 1) {
+      @content
+    }
+  } @else if ($direction == $UPWARDS-OPEN) {
+    @media (min-width: $low-px) {
+      @content
+    }
+  } @else {
+
+    /*
+    * ERROR @ querybuilder mixin:
+    * No such direction!
+    */
+
+  }
+}