public
Last active

SASS resolution media query mixin

  • Download Gist
if-resolution.scss
SCSS
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29
/* @author 14islands.com
* SASS mixins for future proof resolution media query
*/
 
@mixin if-min-resolution($dppx) {
@include if-resolution(min, $dppx) {
@content;
}
}
 
@mixin if-max-resolution($dppx) {
@include if-resolution(max, $dppx) {
@content;
}
}
 
@mixin if-resolution($prefix, $dppx) {
// 1px = 96dpi
$dpi: $dppx * 96;
@media
(-webkit-#{$prefix}-device-pixel-ratio: #{$dppx}),
( #{$prefix}--moz-device-pixel-ratio: #{$dppx}),
( -o-#{$prefix}-device-pixel-ratio: #{$dppx*2}/2),
( #{$prefix}-device-pixel-ratio: #{$dppx}),
( #{$prefix}-resolution: #{$dpi}dpi),
( #{$prefix}-resolution: #{$dppx}dppx) {
@content;
}
}

Please sign in to comment on this gist.

Something went wrong with that request. Please try again.