├── .gitignore ├── CHANGELOG.md ├── package.json ├── LICENSE ├── README.md └── rupture.scss /.gitignore: -------------------------------------------------------------------------------- 1 | .sass-cache/ 2 | *.css.map 3 | 4 | node_modules/ 5 | .idea 6 | -------------------------------------------------------------------------------- /CHANGELOG.md: -------------------------------------------------------------------------------- 1 | ## [1.0.0] - 2021-10-23 2 | 3 | ### Changed 4 | - Using ```math.div(a, b)``` instead of deprecated ```/``` for division. 5 | See [Breaking Change: Slash as Division](https://github.com/sass-lang.com/documentation/breaking-changes/slash-div) 6 | 7 | ### Fixed 8 | - Typo in -o_min-device-pixel-ratio, #137. 9 | 10 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "rupture-sass", 3 | "version": "1.0.0", 4 | "description": "Simple media queries for SASS", 5 | "main": "rupture.scss", 6 | "repository": { 7 | "type": "git", 8 | "url": "git+https://github.com/CubaSAN/rupture-sass.git" 9 | }, 10 | "author": "Volodymyr Sen ", 11 | "license": "MIT", 12 | "bugs": { 13 | "url": "https://github.com/CubaSAN/rupture-sass/issues" 14 | }, 15 | "homepage": "https://github.com/CubaSAN/rupture-sass#readme" 16 | } 17 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2018 Volodymyr Sen 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Rupture-sass 2 | Simple media queries for SASS (Rupture mixins for SASS) 3 | 4 | 5 | 6 | Write ```scss``` code as follows: 7 | ```scss 8 | .some-class { 9 | color: red; 10 | @include above(32em) { 11 | color: green; 12 | } 13 | @include tablet() { 14 | color: yellow; 15 | } 16 | } 17 | ``` 18 | 19 | Which compiles to: 20 | ```css 21 | .some-class { 22 | color: red; 23 | } 24 | @media only screen and (min-width: 32em) { 25 | .some-class { 26 | color: green; 27 | } 28 | } 29 | @media only screen and (min-width: 400px) and (max-width: 1050px) { 30 | .some-class { 31 | color: yellow; 32 | } 33 | } 34 | ``` 35 | 36 | ## Installation 37 | 38 | `npm install rupture-sass` 39 | 40 | ## Use 41 | 42 | - Import package via ```@import``` directive 43 | ```scss 44 | @import 'node_modules/rupture-sass/rupture'; 45 | // ... 46 | ``` 47 | - If using Webpack as a bundler, with ```node-sass``` packge 48 | ```scss 49 | @import '~rupture-sass/rupture'; 50 | // ... 51 | ``` 52 | - Download package, and directly include file to project 53 | 54 | ## API Documentation 55 | 56 | ### Customization 57 | 58 | #### Default values 59 | 60 | ```scss 61 | $rupture: ( 62 | mobile-cutoff: 400px, 63 | desktop-cutoff: 1050px, 64 | hd-cutoff: 1800px, 65 | enable-em-breakpoints: false, 66 | anti-overlap: false, 67 | density-queries: 'dppx' 'webkit' 'moz' 'dpi', 68 | retina-density: 1.5, 69 | use-device-width: false 70 | ); 71 | ``` 72 | 73 | In order to override any value use ```$rupture: map-merge($rupture, (key: value, ..., keyN: valueN)``` 74 | 75 | ```scss 76 | $rupture: map-merge($rupture, ( 77 | mobile-cutoff: 768px, 78 | desktop-cutoff: 1366px 79 | )); 80 | ``` 81 | 82 | #### mobile-cutoff (value) 83 | Upper bound where `mobile()` mixin has an effect and lower bound of the `tablet()` mixin. 84 | 85 | #### desktop-cutoff (value) 86 | Lower bound where `desktop()` mixin has an effect and upper bound of the `tablet()` mixins. 87 | 88 | #### hd-cutoff (value) 89 | Lower bound where `hd()` mixin starts to have an affect 90 | 91 | #### enable-em-breakpoints (boolean) 92 | Convert pixel values into EM's values: 93 | ```scss 94 | $rupture: map-merge($rupture, ( 95 | enable-em-breakpoints: true 96 | )); 97 | @include below(768px) {/*...*/}; 98 | // Compiles to: 99 | // @media only screen and (max-width: 48em) {...} 100 | ``` 101 | 102 | #### anti-overlap (boolean | value | list) 103 | Fixes overlaped boundaries of two or more media queries, for example we might have 104 | ```css 105 | @media only screen and (max-width: 48em) {/*...*/} 106 | @media only screen and (min-width: 48em) {/*...*/} 107 | ``` 108 | in this case, when screen size is exactly ```48em's``` or ```768px``` two media queries will be 109 | applied in one time. In order to prevent this, override the ```anti-overlap``` value 110 | ```scss 111 | $rupture: map-merge($rupture, ( 112 | anti-overlap: true 113 | )); 114 | // Resolves to: 115 | // @media only screen and (max-width: 48em) {/*...*/} 116 | // @media only screen and (min-width: 48.0625em) {/*...*/} 117 | ``` 118 | By default adjustement happens with ```+1px``` value or ```+0.0625em if``` ```enable-em-breakpoints``` is ```true``` but also specific values, like ```1px``` or ```0.5rem``` might be assigned 119 | ```scss 120 | anti-overlap: false // default value 121 | anti-overlap: true // enables 1px (or em equivalent) overlap correction globally 122 | anti-overlap: 0px // same as anti-overlap = false 123 | anti-overlap: 1px // same as anti-overlap = true 124 | anti-overlap: -1px // negative offsets decrease the `max-width` arguments 125 | anti-overlap: 0.001em // positive offsets increase the `min-width` arguments 126 | anti-overlap: 1px 0.0625em 0.0625rem // explicit relative values will be used if they are provided instead of calculating them from the font size 127 | ``` 128 | 129 | #### density-queries (list) 130 | 131 | Set of vendor prefixes for generating vendor specific density media queries. Valid values are 'webkit', 'moz', 'o', 'ratio', 'dpi', and 'dppx' 132 | Used in ```density()``` and ```retina()``` mixins as well as when ```$density``` or ```$retina``` specified as parameter 133 | ```scss 134 | $rupture: map-merge($rupture, ( 135 | density-queries: 'dppx' 'webkit' 'moz' 'dpi', 136 | )); 137 | div { 138 | @include density(2) {/*...*/} 139 | } 140 | ``` 141 | Compiles to: 142 | ```css 143 | @media only screen and (min-resolution: 2dppx), /* dppx */ 144 | only screen and (-webkit_min-device-pixel-ratio: 2), /* webkit */ 145 | only screen and (min--moz-device-pixel-ratio: 2), /* moz */ 146 | only screen and (min-resolution: 192dpi) { /* dpi */ 147 | div {/*...*/} 148 | } 149 | ``` 150 | 151 | #### retina-density (value) 152 | 153 | Density value for retina density mixins, by default ```1.5``` 154 | 155 | #### use-device-width (boolean) 156 | 157 | Toggles ```min-width``` and ```max-width``` media queries to ```min-device-width``` and ```max-device-width``` 158 | 159 | #### rasterise-media-queries (boolean) 160 | 161 | Supresses all adjustements like ```density``` or ```retina``` from all media queries. 162 | Mostly used to generate fallback styles for legasy browsers 163 | 164 | ##### scale (list) 165 | A list of breakpoint bounds for referencing breakpoint span as an index. 166 | The idea is taken from [breakpoint-slicer](https://github.com/lolmaus/breakpoint-slicer). 167 | ```scss 168 | $rupture: map-merge($rupture, ( 169 | scale: 0 400px 600px 800px 1050px 1800px 170 | )); 171 | ``` 172 | In this case, ```0 to 400px``` will have index ```1```, ```400px to 600px``` index ```2```, an so on... 173 | Then you can reference index in mixins, like: 174 | ```scss 175 | @include at(2) {/*...*/} 176 | // Compiles to: 177 | // @media only screen and (min-width: 400px) and (max-width: 600px) {} 178 | ``` 179 | 180 | #### scale-names (list) 181 | A list of string reppresentation for indexes in ```scale``` property 182 | ```scss 183 | $rupture: map-merge($rupture, ( 184 | scale: 0 400px 600px 800px 1050px 1800px, 185 | scale-names: 'xs' 's' 'm' 'l' 'xl' 'hd' 186 | )); 187 | ``` 188 | ``` 189 | scale: 0 400px 600px 800px 1050px 1800px 190 | // └────┬────┘ └────┬────┘ └────┬────┘ └────┬────┘ └────┬────┘ └────┬──── 191 | // 1 2 3 4 5 6 192 | scale-names: 'xs' 's' 'm' 'l' 'xl' 'hd' 193 | ``` 194 | ```scss 195 | @include at(s) {/*...*/} 196 | // Compiles to: 197 | // @media only screen and (min-width: 400px) and (max-width: 600px) {} 198 | ``` 199 | 200 | ### Mixins 201 | 202 | #### above(value) 203 | 204 | Media query kicks in above the specified value, index or scale name 205 | 206 | #### from-width(value) 207 | 208 | Alias to ```above()``` 209 | 210 | #### from(value) 211 | 212 | Alias to ```above()``` using breakpoint-slicer syntax 213 | 214 | #### below(value) 215 | 216 | Media query kicks in below the specified value, index or scale name 217 | 218 | #### to-width(value) 219 | 220 | Alias to ```below()``` 221 | 222 | #### to(value) 223 | 224 | Alias to ```below()``` using breakpoint-slicer syntax 225 | 226 | #### between(minVal, maxVal) 227 | 228 | Media query takes an affect between ```minVal``` and ```maxVal``` value, index or scale name 229 | 230 | #### at(value) 231 | 232 | Used for specifying media query only at exact index or scale-name 233 | ```scss 234 | @include at(s) {/*...*/} 235 | // Compiles to: 236 | // @media only screen and (min-width: 400px) and (max-width: 600px) {} 237 | ``` 238 | Has no reason with ```px```, ```em``` or ```rem``` values 239 | 240 | #### mobile() 241 | Media query for screens width like mobile, by default from ```0``` till ```400px```, upper bound could be changed with ```mobile-cutoff``` 242 | 243 | #### tablet() 244 | Media query for screens width like tablet, by default from ```400px``` till ```1050px```, lower bound could be changed with ```mobile-cutoff``` and upper bound with ```desktop-cutoff``` 245 | 246 | #### desktop() 247 | Media query for desktop like screens, by default from ```1050px``` and above, lower bound could be changed with ```desktop-cutoff``` 248 | 249 | #### hd() 250 | Media query for large screens, by default from ```1800px``` and above, lower bound could be changed with ```hd-cutoff``` 251 | 252 | #### density(number) 253 | Media query for specific device pixel density, possible values ```1.5```, ```2``` 254 | ```scss 255 | div { 256 | @include density(2) {/*...*/} 257 | } 258 | ``` 259 | Compiles to: 260 | ```css 261 | @media only screen and (min-resolution: 2dppx), /* dppx */ 262 | only screen and (-webkit_min-device-pixel-ratio: 2), /* webkit */ 263 | only screen and (min--moz-device-pixel-ratio: 2), /* moz */ 264 | only screen and (min-resolution: 192dpi) { /* dpi */ 265 | div {/*...*/} 266 | } 267 | ``` 268 | 269 | #### retina() 270 | 271 | Add ```density``` media queries with ```retina-density```, default retina density is ```1.5``` but migth be changed with ```retina-density``` 272 | 273 | #### landscape() 274 | 275 | Add a media query for screen when the viewport is wider than it is tall or in landscape mode 276 | 277 | #### portrait() 278 | 279 | Add a media query for screen when the viewport is taller than it is wide or in portrait mode 280 | 281 | #### hover() 282 | 283 | Add media queries for devices with hover over element's ability 284 | 285 | #### touch() 286 | 287 | Add media queries for devices with touch only ability 288 | 289 | #### Mixins Arguments 290 | 291 | Almost all mixins receive parameters to make media query more specific. 292 | Following parameters are: ```$scale-point```, ```$anti-overlap```, ```$density```, ```$orientation```, ```$use-device-width```, ```$fallback-class``` and can be added to mixin separately. 293 | ```scss 294 | div { 295 | @include above(32em, $orientation: portrait, $fallback-class: '.tablet-portrait') { 296 | color: red; 297 | } 298 | } 299 | ``` 300 | Compiles to: 301 | ```css 302 | @media only screen and (min-width: 32em) and (orientation: portrait) { 303 | div { 304 | color: red; 305 | } 306 | } 307 | 308 | .tablet-portrait div { 309 | color: red; 310 | } 311 | ``` 312 | 313 | ### Miscellaneous 314 | 315 | Inspired by [Rupture](http://jescalan.github.io/rupture/) mixins lib for Stylus 316 | 317 | ### Thanks 318 | 319 | [elgandoz](https://github.com/elgandoz) 320 | [Honza](https://github.com/crs1138) 321 | 322 | -------------------------------------------------------------------------------- /rupture.scss: -------------------------------------------------------------------------------- 1 | @use "sass:math"; 2 | $base-font-size: 16px !default; 3 | $rasterise-media-queries: false !default; 4 | $rupture: ( rasterise-media-queries: $rasterise-media-queries, mobile-cutoff: 400px, desktop-cutoff: 1050px, hd-cutoff: 1800px, enable-em-breakpoints: false, base-font-size: $base-font-size, anti-overlap: false, density-queries: 'dppx' 'webkit' 'moz' 'dpi', retina-density: 1.5, use-device-width: false); 5 | $rupture: map-merge($rupture, ( scale: 0 map-get($rupture, mobile-cutoff) 600px 800px map-get($rupture, desktop-cutoff) map-get($rupture, hd-cutoff), scale-names: 'xs' 's' 'm' 'l' 'xl' 'hd')); 6 | @function _to-length($number, $unit) { 7 | $strings: 'px' 'cm' 'mm' '%' 'ch' 'pica' 'in' 'em' 'rem' 'pt' 'pc' 'ex' 'vw' 'vh' 'vmin' 'vmax'; 8 | $units: 1px 1cm 1mm 1% 1ch 1pica 1in 1em 1rem 1pt 1pc 1ex 1vw 1vh 1vmin 1vmax; 9 | $index: index($strings, $unit); 10 | @if not $index { 11 | @warn "Unknown unit `#{$unit}`."; 12 | @return false; 13 | } 14 | @return $number * nth($units, $index); 15 | } 16 | 17 | @function _number($value) { 18 | @if type-of($value)=='number' { 19 | @return $value; 20 | } 21 | @else if type-of($value) !='string' { 22 | $_: log('Value for `to-number` should be a number or a string.'); 23 | } 24 | $result: 0; 25 | $digits: 0; 26 | $minus: str-slice($value, 1, 1)=='-'; 27 | $numbers: ('0': 0, '1': 1, '2': 2, '3': 3, '4': 4, '5': 5, '6': 6, '7': 7, '8': 8, '9': 9); 28 | @for $i from if($minus, 2, 1) through str-length($value) { 29 | $character: str-slice($value, $i, $i); 30 | @if not (index(map-keys($numbers), $character) or $character=='.') { 31 | @return _to-length(if($minus, -$result, $result), str-slice($value, $i)) 32 | } 33 | @if $character=='.' { 34 | $digits: 1; 35 | } 36 | @else if $digits==0 { 37 | $result: $result * 10 + map-get($numbers, $character); 38 | } 39 | @else { 40 | $digits: $digits * 10; 41 | $result: $result + math.div(map-get($numbers, $character), $digits); 42 | } 43 | } 44 | @return if($minus, -$result, $result); 45 | ; 46 | } 47 | 48 | @function _strip-units($number) { 49 | $number: _number($number); 50 | @return math.div($number, $number * 0 + 1); 51 | } 52 | 53 | @function _is-string($val) { 54 | @return type-of($val)=='string'; 55 | } 56 | 57 | @function _get-scale-number($scale-name) { 58 | @each $list-item in map-get($rupture, scale-names) { 59 | @if ($list-item==$scale-name) { 60 | @return index(map-get($rupture, scale-names), $list-item); 61 | } 62 | } 63 | @return false; 64 | } 65 | 66 | @function _convert-to($to-unit, $value, $context: map-get($rupture, base-font-size)) { 67 | $from-unit: unit(_number($value)); 68 | @if ($to-unit==$from-unit) { 69 | @return $value; 70 | } 71 | @if ($to-unit=='em' or $to-unit=='rem') { 72 | @if ($from-unit=='em' or $from-unit=='rem') { 73 | @return $value; 74 | } 75 | @return "#{math.div(_strip-units($value), _strip-units($context))}#{$to-unit}"; 76 | } 77 | @if ($to-unit=='px') { 78 | @return "#{_strip-units($value) * _strip-units($context)}px"; 79 | } 80 | } 81 | 82 | @function _on-scale($n) { 83 | @return unit(_number($n))==''; 84 | } 85 | 86 | @function _larger-than-scale($n) { 87 | @return ($n >=(length(map-get($rupture, scale)))) and _on-scale($n); 88 | } 89 | 90 | @function _is-zero($n) { 91 | @return n==0; 92 | } 93 | 94 | @function _overlap-shift($anti-overlap, $n) { 95 | $shift-unit: unit(_number($n)); 96 | @if not $anti-overlap { 97 | $anti-overlap: 0px; 98 | } 99 | @if ($anti-overlap==true) { 100 | $anti-overlap: 1px; 101 | } 102 | @if (length($anti-overlap)==1) { 103 | @return _convert-to($shift-unit, $anti-overlap); 104 | } 105 | @each $val in $anti-overlap { 106 | @if (unit(_number($val))==$shift-unit) { 107 | @return $val; 108 | } 109 | } 110 | } 111 | 112 | @function _add($var1, $var2) { 113 | @return _number($var1)+_number($var2); 114 | } 115 | 116 | @function _adjust-overlap($anti-overlap, $n, $side: 'min') { 117 | $_shift: _overlap-shift($anti-overlap, $n); 118 | @if ($side=='min' and _strip-units($_shift) > 0) or ($side=='max' and _strip-units($_shift) < 0) { 119 | $n: _add($n, $_shift); 120 | } 121 | @return $n; 122 | } 123 | 124 | @function _density-queries($density) { 125 | @if ($density=='retina') { 126 | $density: map-get($rupture, retina-density); 127 | } 128 | $queries: (); 129 | @each $query in map-get($rupture, density-queries) { 130 | @if $query=='webkit' { 131 | $queries: append($queries, '(-webkit_min-device-pixel-ratio: #{$density})'); 132 | } 133 | @else if $query=='moz' { 134 | $queries: append($queries, '(min--moz-device-pixel-ratio: #{$density})'); 135 | } 136 | @else if $query=='o' { 137 | $queries: append($queries, '(-o-min-device-pixel-ratio: #{$density}/1)'); 138 | } 139 | @else if $query=='ratio' { 140 | $queries: append($queries, '(min-device-pixel-ratio: #{$density})'); 141 | } 142 | @else if $query=='dpi' { 143 | $queries: append($queries, '(min-resolution: #{round($density * 96)}dpi)'); 144 | } 145 | @else if $query=='dppx' { 146 | $queries: append($queries, '(min-resolution: #{$density}dppx)'); 147 | } 148 | } 149 | @return $queries; 150 | } 151 | 152 | @mixin create-fallback-class($selected, $class) { 153 | @at-root #{$class} #{$selected} { 154 | @content; 155 | } 156 | } 157 | 158 | @mixin between($min, $max, $anti-overlap: map-get($rupture, anti-overlap), $density: null, $orientation: null, $use-device-width: map-get($rupture, use-device-width), $fallback-class: null) { 159 | $selected: &; 160 | $initial_min: $min; 161 | $initial_max: $max; 162 | @if _is-string($min) { 163 | $min: _get-scale-number($min); 164 | } 165 | @if _is-string($max) { 166 | $max: _get-scale-number($max); 167 | } 168 | $_min: if(_is-zero($min) or (not _on-scale($min)), $min, nth(map-get($rupture, scale), $min)); 169 | $_max: if(_is-string($initial_max) and _on-scale($max), nth(map-get($rupture, scale), $max + 1), $max); 170 | @if (map-get($rupture, rasterise-media-queries)) { 171 | @if not ($density or $_max or $orientation) { 172 | @content; 173 | } 174 | } 175 | @else { 176 | $condition: 'only screen'; 177 | $use-device-width: if($use-device-width, 'device-', ''); 178 | @if not (_strip-units($_min)==0) { 179 | @if (map-get($rupture, enable-em-breakpoints)) { 180 | $_min: _convert-to('em', $_min); 181 | } 182 | $_min: _adjust-overlap($anti-overlap, $_min, $side: 'min'); 183 | $condition: $condition+' and (min-'+$use-device-width+'width: #{$_min})'; 184 | } 185 | @if not (_larger-than-scale($max)) { 186 | @if (map-get($rupture, enable-em-breakpoints)) { 187 | $_max: _convert-to('em', $_max); 188 | } 189 | $_max: _adjust-overlap($anti-overlap, $_max, $side: 'max'); 190 | $condition: $condition+' and (max-'+$use-device-width+'width: #{$_max})'; 191 | } 192 | @if $orientation { 193 | $condition: $condition+' and (orientation: #{$orientation})'; 194 | } 195 | @if $density { 196 | $conditions: (); 197 | @each $query in _density-queries($density) { 198 | $conditions: append($conditions, $condition + ' and #{$query}', comma); 199 | } 200 | $condition: $conditions; 201 | } 202 | @media #{$condition} { 203 | @content; 204 | } 205 | } 206 | @if $fallback-class { 207 | @include create-fallback-class($selected, $fallback-class) { 208 | @content; 209 | } 210 | } 211 | } 212 | 213 | @mixin at($scale-point, $anti-overlap: map-get($rupture, anti-overlap), $density: null, $orientation: null, $use-device-width: map-get($rupture, use-device-width), $fallback-class: null) { 214 | @include between($scale-point, $scale-point, $anti-overlap, $density, $orientation, $use-device-width, $fallback-class) { 215 | @content; 216 | } 217 | } 218 | 219 | @mixin from-width($scale-point, $anti-overlap: map-get($rupture, anti-overlap), $density: null, $orientation: null, $use-device-width: map-get($rupture, use-device-width), $fallback-class: null) { 220 | @include between($scale-point, length(map-get($rupture, scale)), $anti-overlap, $density, $orientation, $use-device-width, $fallback-class) { 221 | @content; 222 | } 223 | } 224 | 225 | @mixin above($args...) { 226 | @include from-width($args...) { 227 | @content; 228 | } 229 | } 230 | 231 | @mixin from($args...) { 232 | @include from-width($args...) { 233 | @content; 234 | } 235 | } 236 | 237 | @mixin to-width($scale-point, $anti-overlap: map-get($rupture, anti-overlap), $density: null, $orientation: null, $use-device-width: map-get($rupture, use-device-width), $fallback-class: null) { 238 | @include between(1, $scale-point, $anti-overlap, $density, $orientation, $use-device-width, $fallback-class) { 239 | @content; 240 | } 241 | } 242 | 243 | @mixin below($args...) { 244 | @include to-width($args...) { 245 | @content; 246 | } 247 | } 248 | 249 | @mixin to($args...) { 250 | @include to-width($args...) { 251 | @content; 252 | } 253 | } 254 | 255 | @mixin mobile($anti-overlap: map-get($rupture, anti-overlap), $density: null, $orientation: null, $use-device-width: map-get($rupture, use-device-width), $fallback-class: null) { 256 | @include below(map-get($rupture, mobile-cutoff), $anti-overlap, $density, $orientation, $use-device-width, $fallback-class) { 257 | @content; 258 | } 259 | } 260 | 261 | @mixin tablet($anti-overlap: map-get($rupture, anti-overlap), $density: null, $orientation: null, $use-device-width: map-get($rupture, use-device-width), $fallback-class: null) { 262 | @include between(map-get($rupture, mobile-cutoff), map-get($rupture, desktop-cutoff), $anti-overlap, $density, $orientation, $use-device-width, $fallback-class) { 263 | @content; 264 | } 265 | } 266 | 267 | @mixin desktop($anti-overlap: map-get($rupture, anti-overlap), $density: null, $orientation: null, $use-device-width: map-get($rupture, use-device-width), $fallback-class: null) { 268 | @include above(map-get($rupture, desktop-cutoff), $anti-overlap, $density, $orientation, $use-device-width, $fallback-class) { 269 | @content; 270 | } 271 | } 272 | 273 | @mixin hd($anti-overlap: map-get($rupture, anti-overlap), $density: null, $orientation: null, $use-device-width: map-get($rupture, use-device-width), $fallback-class: null) { 274 | @include above(map-get($rupture, hd-cutoff), $anti-overlap, $density, $orientation, $use-device-width, $fallback-class) { 275 | @content; 276 | } 277 | } 278 | 279 | @mixin density($density, $fallback-class: null, $orientation: null) { 280 | $selected: &; 281 | @if not map-get($rupture, rasterise-media-queries) { 282 | $conditions: (); 283 | @each $query in _density-queries($density) { 284 | $condition: 'only screen and #{$query}'; 285 | @if $orientation { 286 | $condition: $condition+' and (orientation: #{$orientation})'; 287 | } 288 | $conditions: append($conditions, $condition, comma); 289 | } 290 | $condition: $conditions; 291 | @media #{$conditions} { 292 | @content; 293 | } 294 | @if $fallback-class { 295 | @include create-fallback-class($selected, $fallback-class) { 296 | @content; 297 | } 298 | } 299 | } 300 | } 301 | 302 | @mixin pixel-ratio($args...) { 303 | @include density($args...) { 304 | @content; 305 | } 306 | } 307 | 308 | @mixin retina($orientation: null, $fallback-class: null) { 309 | @include density('retina', $fallback-class, $orientation) { 310 | @content; 311 | } 312 | ; 313 | } 314 | 315 | @mixin landscape($density: null, $fallback-class: null) { 316 | $selected: &; 317 | @if not map-get($rupture, rasterise-media-queries) { 318 | @if $density { 319 | @include pixel-ratio($density, $fallback-class, $orientation: landscape) { 320 | @content; 321 | } 322 | } 323 | @else { 324 | @media only screen and (orientation: landscape) { 325 | @content; 326 | } 327 | @if $fallback-class { 328 | @include create-fallback-class($selected, $fallback-class) { 329 | @content; 330 | } 331 | } 332 | } 333 | } 334 | } 335 | 336 | @mixin portrait($density: null, $fallback-class: null) { 337 | $selected: &; 338 | @if not map-get($rupture, rasterise-media-queries) { 339 | @if $density { 340 | @include pixel-ratio($density, $fallback-class, $orientation: portrait) { 341 | @content; 342 | } 343 | } 344 | @else { 345 | @media only screen and (orientation: portrait) { 346 | @content; 347 | } 348 | @if $fallback-class { 349 | @include create-fallback-class($selected, $fallback-class) { 350 | @content; 351 | } 352 | } 353 | } 354 | } 355 | } 356 | 357 | @mixin rupture-hover($density: null, $orientation: null, $fallback-class: null) { 358 | $condition: 'only screen and (hover: hover)'; 359 | @media #{$condition} { 360 | @content; 361 | } 362 | } 363 | 364 | @mixin hover($args...) { 365 | @include rupture-hover($args...) { 366 | @content; 367 | } 368 | } 369 | 370 | @mixin rupture-touch($density: null, $orientation: null, $fallback-class: null) { 371 | $condition: 'only screen and (hover: none)'; 372 | @media #{$condition} { 373 | @content; 374 | } 375 | } 376 | 377 | @mixin touch($args...) { 378 | @include rupture-touch($args...) { 379 | @content; 380 | } 381 | } 382 | --------------------------------------------------------------------------------