AlexAegis/loreplotter

View on GitHub
src/app/style/responsive.scss

Summary

Maintainability
Test Coverage
$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!";
        }
    }
}