src/app/style/responsive.scss
$respond-to-no-mediaqueries-fallback: desktop;
$respond-to-fallback-class: lt-ie9;
$respond-to-breakpoints: (
large '(min-width: 721px)',
medium '(min-width: 321px) and (max-width: 720px)',
small '(max-width: 320px)'
);
@mixin respond-to($medias...) {
$breakpoints-length: length($respond-to-breakpoints);
@each $media in $medias {
$had-a-hit: false;
@for $i from 1 through $breakpoints-length {
$breakpoint: nth($respond-to-breakpoints, $i);
@if $media == nth($breakpoint, 1) {
$definition: nth($breakpoint, 2);
$had-a-hit: true;
@media #{$definition} {
@content;
}
}
}
@if $media == $respond-to-no-mediaqueries-fallback {
.#{$respond-to-fallback-class} & {
@content;
}
}
@if $had-a-hit == false {
@warn "Media #{media} not found!";
}
}
}