init'

assets/sass/libs/_breakpoints.scss

@@ -0,0 +1,203 @@
+// Vars.
+
+/// Breakpoints.
+/// @var {list}
+$breakpoints: ();
+
+// Mixins.
+
+/// Sets breakpoints.
+/// @param {map} $x Breakpoints.
+@mixin breakpoints($x: ()) {
+  $breakpoints: $x !global;
+}
+
+/// Wraps @content in a @media block targeting a specific orientation.
+/// @param {string} $orientation Orientation.
+@mixin orientation($orientation) {
+  @media screen and (orientation: #{$orientation}) {
+    @content;
+  }
+}
+
+/// Wraps @content in a @media block using a given query.
+/// @param {string} $query Query.
+@mixin breakpoint($query: null) {
+  $breakpoint: null;
+  $op: null;
+  $media: null;
+
+  // Determine operator, breakpoint.
+
+  // Greater than or equal.
+  @if (str-slice($query, 0, 2) == ">=") {
+    $op: "gte";
+    $breakpoint: str-slice($query, 3);
+  }
+
+  // Less than or equal.
+  @else if (str-slice($query, 0, 2) == "<=") {
+    $op: "lte";
+    $breakpoint: str-slice($query, 3);
+  }
+
+  // Greater than.
+  @else if (str-slice($query, 0, 1) == ">") {
+    $op: "gt";
+    $breakpoint: str-slice($query, 2);
+  }
+
+  // Less than.
+  @else if (str-slice($query, 0, 1) == "<") {
+    $op: "lt";
+    $breakpoint: str-slice($query, 2);
+  }
+
+  // Not.
+  @else if (str-slice($query, 0, 1) == "!") {
+    $op: "not";
+    $breakpoint: str-slice($query, 2);
+  }
+
+  // Equal.
+  @else {
+    $op: "eq";
+    $breakpoint: $query;
+  }
+
+  // Build media.
+  @if ($breakpoint and map-has-key($breakpoints, $breakpoint)) {
+    $a: map-get($breakpoints, $breakpoint);
+
+    // Range.
+    @if (type-of($a) == "list") {
+      $x: nth($a, 1);
+      $y: nth($a, 2);
+
+      // Max only.
+      @if ($x == null) {
+        // Greater than or equal (>= 0 / anything)
+        @if ($op == "gte") {
+          $media: "screen";
+        }
+
+        // Less than or equal (<= y)
+        @else if ($op == "lte") {
+          $media: "screen and (max-width: " + $y + ")";
+        }
+
+        // Greater than (> y)
+        @else if ($op == "gt") {
+          $media: "screen and (min-width: " + ($y + 1) + ")";
+        }
+
+        // Less than (< 0 / invalid)
+        @else if ($op == "lt") {
+          $media: "screen and (max-width: -1px)";
+        }
+
+        // Not (> y)
+        @else if ($op == "not") {
+          $media: "screen and (min-width: " + ($y + 1) + ")";
+        }
+
+        // Equal (<= y)
+        @else {
+          $media: "screen and (max-width: " + $y + ")";
+        }
+      }
+
+      // Min only.
+      @else if ($y == null) {
+        // Greater than or equal (>= x)
+        @if ($op == "gte") {
+          $media: "screen and (min-width: " + $x + ")";
+        }
+
+        // Less than or equal (<= inf / anything)
+        @else if ($op == "lte") {
+          $media: "screen";
+        }
+
+        // Greater than (> inf / invalid)
+        @else if ($op == "gt") {
+          $media: "screen and (max-width: -1px)";
+        }
+
+        // Less than (< x)
+        @else if ($op == "lt") {
+          $media: "screen and (max-width: " + ($x - 1) + ")";
+        }
+
+        // Not (< x)
+        @else if ($op == "not") {
+          $media: "screen and (max-width: " + ($x - 1) + ")";
+        }
+
+        // Equal (>= x)
+        @else {
+          $media: "screen and (min-width: " + $x + ")";
+        }
+      }
+
+      // Min and max.
+      @else {
+        // Greater than or equal (>= x)
+        @if ($op == "gte") {
+          $media: "screen and (min-width: " + $x + ")";
+        }
+
+        // Less than or equal (<= y)
+        @else if ($op == "lte") {
+          $media: "screen and (max-width: " + $y + ")";
+        }
+
+        // Greater than (> y)
+        @else if ($op == "gt") {
+          $media: "screen and (min-width: " + ($y + 1) + ")";
+        }
+
+        // Less than (< x)
+        @else if ($op == "lt") {
+          $media: "screen and (max-width: " + ($x - 1) + ")";
+        }
+
+        // Not (< x and > y)
+        @else if ($op == "not") {
+          $media: "screen and (max-width: " +
+            ($x - 1) +
+            "), screen and (min-width: " +
+            ($y + 1) +
+            ")";
+        }
+
+        // Equal (>= x and <= y)
+        @else {
+          $media: "screen and (min-width: " +
+            $x +
+            ") and (max-width: " +
+            $y +
+            ")";
+        }
+      }
+    }
+
+    // String.
+    @else {
+      // Missing a media type? Prefix with "screen".
+      @if (str-slice($a, 0, 1) == "(") {
+        $media: "screen and " + $a;
+      }
+
+      // Otherwise, use as-is.
+      @else {
+        $media: $a;
+      }
+    }
+  }
+
+  // Output.
+  @media #{$media} {
+    @content;
+  }
+}