_breakpoints.scss (4577B)
1 // breakpoints.scss v1.0 | @ajlkn | MIT licensed */ 2 3 // Vars. 4 5 /// Breakpoints. 6 /// @var {list} 7 $breakpoints: () !global; 8 9 // Mixins. 10 11 /// Sets breakpoints. 12 /// @param {map} $x Breakpoints. 13 @mixin breakpoints($x: ()) { 14 $breakpoints: $x !global; 15 } 16 17 /// Wraps @content in a @media block targeting a specific orientation. 18 /// @param {string} $orientation Orientation. 19 @mixin orientation($orientation) { 20 @media screen and (orientation: #{$orientation}) { 21 @content; 22 } 23 } 24 25 /// Wraps @content in a @media block using a given query. 26 /// @param {string} $query Query. 27 @mixin breakpoint($query: null) { 28 29 $breakpoint: null; 30 $op: null; 31 $media: null; 32 33 // Determine operator, breakpoint. 34 35 // Greater than or equal. 36 @if (str-slice($query, 0, 2) == '>=') { 37 38 $op: 'gte'; 39 $breakpoint: str-slice($query, 3); 40 41 } 42 43 // Less than or equal. 44 @elseif (str-slice($query, 0, 2) == '<=') { 45 46 $op: 'lte'; 47 $breakpoint: str-slice($query, 3); 48 49 } 50 51 // Greater than. 52 @elseif (str-slice($query, 0, 1) == '>') { 53 54 $op: 'gt'; 55 $breakpoint: str-slice($query, 2); 56 57 } 58 59 // Less than. 60 @elseif (str-slice($query, 0, 1) == '<') { 61 62 $op: 'lt'; 63 $breakpoint: str-slice($query, 2); 64 65 } 66 67 // Not. 68 @elseif (str-slice($query, 0, 1) == '!') { 69 70 $op: 'not'; 71 $breakpoint: str-slice($query, 2); 72 73 } 74 75 // Equal. 76 @else { 77 78 $op: 'eq'; 79 $breakpoint: $query; 80 81 } 82 83 // Build media. 84 @if ($breakpoint and map-has-key($breakpoints, $breakpoint)) { 85 86 $a: map-get($breakpoints, $breakpoint); 87 88 // Range. 89 @if (type-of($a) == 'list') { 90 91 $x: nth($a, 1); 92 $y: nth($a, 2); 93 94 // Max only. 95 @if ($x == null) { 96 97 // Greater than or equal (>= 0 / anything) 98 @if ($op == 'gte') { 99 $media: 'screen'; 100 } 101 102 // Less than or equal (<= y) 103 @elseif ($op == 'lte') { 104 $media: 'screen and (max-width: ' + $y + ')'; 105 } 106 107 // Greater than (> y) 108 @elseif ($op == 'gt') { 109 $media: 'screen and (min-width: ' + ($y + 1) + ')'; 110 } 111 112 // Less than (< 0 / invalid) 113 @elseif ($op == 'lt') { 114 $media: 'screen and (max-width: -1px)'; 115 } 116 117 // Not (> y) 118 @elseif ($op == 'not') { 119 $media: 'screen and (min-width: ' + ($y + 1) + ')'; 120 } 121 122 // Equal (<= y) 123 @else { 124 $media: 'screen and (max-width: ' + $y + ')'; 125 } 126 127 } 128 129 // Min only. 130 @else if ($y == null) { 131 132 // Greater than or equal (>= x) 133 @if ($op == 'gte') { 134 $media: 'screen and (min-width: ' + $x + ')'; 135 } 136 137 // Less than or equal (<= inf / anything) 138 @elseif ($op == 'lte') { 139 $media: 'screen'; 140 } 141 142 // Greater than (> inf / invalid) 143 @elseif ($op == 'gt') { 144 $media: 'screen and (max-width: -1px)'; 145 } 146 147 // Less than (< x) 148 @elseif ($op == 'lt') { 149 $media: 'screen and (max-width: ' + ($x - 1) + ')'; 150 } 151 152 // Not (< x) 153 @elseif ($op == 'not') { 154 $media: 'screen and (max-width: ' + ($x - 1) + ')'; 155 } 156 157 // Equal (>= x) 158 @else { 159 $media: 'screen and (min-width: ' + $x + ')'; 160 } 161 162 } 163 164 // Min and max. 165 @else { 166 167 // Greater than or equal (>= x) 168 @if ($op == 'gte') { 169 $media: 'screen and (min-width: ' + $x + ')'; 170 } 171 172 // Less than or equal (<= y) 173 @elseif ($op == 'lte') { 174 $media: 'screen and (max-width: ' + $y + ')'; 175 } 176 177 // Greater than (> y) 178 @elseif ($op == 'gt') { 179 $media: 'screen and (min-width: ' + ($y + 1) + ')'; 180 } 181 182 // Less than (< x) 183 @elseif ($op == 'lt') { 184 $media: 'screen and (max-width: ' + ($x - 1) + ')'; 185 } 186 187 // Not (< x and > y) 188 @elseif ($op == 'not') { 189 $media: 'screen and (max-width: ' + ($x - 1) + '), screen and (min-width: ' + ($y + 1) + ')'; 190 } 191 192 // Equal (>= x and <= y) 193 @else { 194 $media: 'screen and (min-width: ' + $x + ') and (max-width: ' + $y + ')'; 195 } 196 197 } 198 199 } 200 201 // String. 202 @else { 203 204 // Missing a media type? Prefix with "screen". 205 @if (str-slice($a, 0, 1) == '(') { 206 $media: 'screen and ' + $a; 207 } 208 209 // Otherwise, use as-is. 210 @else { 211 $media: $a; 212 } 213 214 } 215 216 } 217 218 // Output. 219 @media #{$media} { 220 @content; 221 } 222 223 }