// breakpoints.scss v1.0 | @ajlkn | MIT licensed */ // Vars. /// Breakpoints. /// @var {list} $breakpoints: () !global; // 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. @elseif (str-slice($query, 0, 2) == '<=') { $op: "lte"; $breakpoint: str-slice($query, 3); } // Greater than. @elseif (str-slice($query, 0, 1) == '>') { $op: "gt"; $breakpoint: str-slice($query, 2); } // Less than. @elseif (str-slice($query, 0, 1) == '<') { $op: "lt"; $breakpoint: str-slice($query, 2); } // Not. @elseif (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) @elseif ($op == 'lte') { $media: "screen and (max-width: " + $y + ")"; } // Greater than (> y) @elseif ($op == 'gt') { $media: "screen and (min-width: " + ($y + 1) + ")"; } // Less than (< 0 / invalid) @elseif ($op == 'lt') { $media: "screen and (max-width: -1px)"; } // Not (> y) @elseif ($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) @elseif ($op == 'lte') { $media: "screen"; } // Greater than (> inf / invalid) @elseif ($op == 'gt') { $media: "screen and (max-width: -1px)"; } // Less than (< x) @elseif ($op == 'lt') { $media: "screen and (max-width: " + ($x - 1) + ")"; } // Not (< x) @elseif ($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) @elseif ($op == 'lte') { $media: "screen and (max-width: " + $y + ")"; } // Greater than (> y) @elseif ($op == 'gt') { $media: "screen and (min-width: " + ($y + 1) + ")"; } // Less than (< x) @elseif ($op == 'lt') { $media: "screen and (max-width: " + ($x - 1) + ")"; } // Not (< x and > y) @elseif ($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; } }