Skip to content

Instantly share code, notes, and snippets.

@atiris
Last active May 14, 2019 14:32
Show Gist options
  • Save atiris/a9e485d45049c0bd6a1885622b85e38b to your computer and use it in GitHub Desktop.
Save atiris/a9e485d45049c0bd6a1885622b85e38b to your computer and use it in GitHub Desktop.
Media query sass helper. Generate basic media query defined by constant breakpoints (xs, sm, md, lg) or by exact value. You can test it here https://www.sassmeister.com/gist/a9e485d45049c0bd6a1885622b85e38b
@media (min-width: 360px) and (max-width: 991px) {
body {
color: blue;
}
}
@media (min-width: 576px) {
body {
color: red;
}
}
@media (min-width: 576px) and (orientation: landscape) {
body {
color: green;
}
}
$breakpoints: (
xs: 576px,
sm: 768px,
md: 992px,
lg: 1200px
);
// usage: @include media-query(sm, md) { ... }
@mixin media-query($minimum, $maximum: false, $orientation: false) {
$maximum-breakpoint: false;
$minimum-breakpoint: $minimum;
// is maximum set?
@if map-has-key($breakpoints, $maximum) {
$maximum-breakpoint: (map-get($breakpoints, $maximum) - 1);
} @else if ($maximum != false) {
$maximum-breakpoint: ($maximum - 1);
}
// get minimum value
@if map-has-key($breakpoints, $minimum) {
$minimum-breakpoint: map-get($breakpoints, $minimum);
}
// media query
@media (min-width: $minimum-breakpoint) {
@if $maximum-breakpoint {
@media (max-width: $maximum-breakpoint) {
@if $orientation {
@media (orientation: $orientation) {
@content;
}
} @else {
@content;
}
}
} @else if $orientation {
@media (orientation: $orientation) {
@content;
}
} @else {
@content;
}
}
}
@include media-query(360px, md) {
body { color: blue; }
}
@include media-query(xs) {
body { color: red; }
}
@include media-query(xs, false, landscape) {
body { color: green; }
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment