Skip to content

Instantly share code, notes, and snippets.

@antsa
Last active March 2, 2019 16:41
Show Gist options
  • Save antsa/3775960 to your computer and use it in GitHub Desktop.
Save antsa/3775960 to your computer and use it in GitHub Desktop.
Media Query mixin - @MQ
// A mixin for media queries: @mq
//
// Use with keywords in $medias array:
// @include mq($media: iphone) {
// ...
// }
//
// Use with manual queries:
// @include mq("all and (min-width:33em)") {
// ...
// }
$medias: // A 2-dimensional array of keywords and mediaqueries
(tiny, "all and (max-width: 18.75em)") // 300px
(mobile, "all and (min-width: 20em)") // 320px
(large-mobile, "all and (min-width: 30em)") // 480px
(small-tablet, "all and (min-width: 37.5em)") // 600px
(tablet, "all and (min-width: 48em)") // 768px
(desktop, "all and (min-width: 60em)") // 960px
(large-desktop, "all and (min-width: 70em)"); // 112 0px
@mixin mq($query: nil, $media: nil) {
@if $media == nil {
@media #{$query} { @content; }
}
@else {
@for $i from 1 through length($medias) {
$keyword: nth(nth($medias, $i), 1);
$content: nth(nth($medias, $i), 2);
@if $media == $keyword {
@media #{$content} { @content; }
}
}
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment