Skip to content

Instantly share code, notes, and snippets.

@italodr
Created June 14, 2017 12:21
Show Gist options
  • Save italodr/b4ded5894afa2ceae19ed1b767785e02 to your computer and use it in GitHub Desktop.
Save italodr/b4ded5894afa2ceae19ed1b767785e02 to your computer and use it in GitHub Desktop.
Sass media queries generator
@function breakpoint-generator($type, $size1, $size2: '', $orientation: '') {
@if $orientation != '' {
$orientation: " and (orientation: #{$orientation})";
}
$mq: '';
@if $type == 'min' {
$mq: "and (min-width: #{nth($size1, 1)})";
}
@elseif $type == 'max' {
$mq: "and (max-width: #{(nth($size1, 1) - 1px)})";
}
@elseif $type == 'between' {
$mq: "and (min-width: #{nth($size1, 1)}) and (max-width: #{(nth($size2, 1) - 1px)})";
}
@elseif $type == 'devices' {
$mq: $size1;
}
@else {
@error "Unexistent type of breakpoint.";
}
@return #{screen} #{$mq}#{$orientation};
}
@mixin breakpoint-devices($mq, $orientation: '') {
$media: breakpoint-generator('devices', $mq, '', $orientation);
@media #{$media} {
@content;
}
}
@mixin breakpoint-max($range, $orientation: '') {
$media: breakpoint-generator('max', $range, '', $orientation);
@media #{$media} {
@content;
}
}
@mixin breakpoint-between($range_min, $range_max, $orientation: '') {
$media: breakpoint-generator('between', $range_min, $range_max, $orientation);
@media #{$media} {
@content;
}
}
@mixin breakpoint($range, $orientation: '') {
$media: breakpoint-generator('min', $range, '', $orientation);
@media #{$media} {
@content;
}
}
/*
Sizes based on:
https://gist.github.com/needim/d15fdc2ac133d8078f7c
*/
/* iPhone 6 & 7 */
$mq-iPhone7: "and (min-device-width : 375px) and (max-device-width : 667px)";
/* iPhone 6 & 7 Plus */
$mq-iPhone7Plus: "and (min-device-width : 414px) and (max-device-width : 736px)";
/* iPhone 5 & 5S */
$mq-iPhone5: "and (min-device-width : 320px) and (max-device-width : 568px)";
/* iPhone 2G - 4S */
$mq-iPhone4: "and (min-device-width : 320px) and (max-device-width : 480px)";
/* iPad */
$mq-iPad: "and (min-device-width : 768px) and (max-device-width : 1024px)";
/* iPad 1, 2 & mini */
$mq-iPadMini: "#{$mq-iPad} and (-webkit-min-device-pixel-ratio: 1)";
/* iPad Retina */
$mq-iPadRetina: "#{$mq-iPad} and (-webkit-min-device-pixel-ratio: 2)";
/* Galaxy S3 */
$mq-Galaxy3: "and (device-width: 320px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 2)";
/* Galaxy S4 */
$mq-Galaxy4: "and (device-width: 320px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3)";
/* Galaxy S5, HTC One */
$mq-Galaxy5: "and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3)";
/* Galaxy Tab 10.1 */
$mq-GalaxyTab10: "and (min-device-width: 800px) and (max-device-width: 1280px)";
/* Asus Nexus 7 */
$mq-Newxus7: "and (device-width: 601px) and (device-height: 906px) and (-webkit-min-device-pixel-ratio: 1.331) and (-webkit-max-device-pixel-ratio: 1.332)";
/* Kindle Fire HD 7" */
$mq-Kindle7: "and (min-device-width: 800px) and (max-device-width: 1280px) and (-webkit-min-device-pixel-ratio: 1.5)";
/* Kindle Fire HD 8.9" */
$mq-Kindle8: "and (min-device-width: 1200px) and (max-device-width: 1600px) and (-webkit-min-device-pixel-ratio: 1.5)";
/* Laptops non-retina screens */
$mq-Laptop: "and (min-device-width: 1200px) and (max-device-width: 1600px) and (-webkit-min-device-pixel-ratio: 1)";
/* Laptops retina screens */
$mq-LaptopRetina: "and (min-device-width: 1200px) and (max-device-width: 1600px) and (-webkit-min-device-pixel-ratio: 2) and (min-resolution: 192dpi)";
/* Apple Watch */
$mq-AppleWatch: "and (max-device-width: 42mm) and (min-device-width: 38mm)";
/* Moto 360 Watch */
$mq-Moto360: "and (max-device-width: 218px) and (max-device-height: 281px)";
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment