Mediaquery mixin to rule them all

gistfile1.sass

$breaks: (
    "small": (min: 0em, max: 34.99em),
    "normal": (min: 35em, max: 47.99em),
    "wide": (min: 48em, max: 64.99em),
    "widest": (min: 65em, max: null)
);

@mixin only-responds-to($breakpoint, $portrait: false) {
    $myBreakpoint: map-get($breaks, $breakpoint);
    $myMin: map-get($myBreakpoint, min);
    $myMax: map-get($myBreakpoint, max);
    
    $myQuery: "only screen and (min-width: " + $myMin + ")";
    @if $myMax { $myQuery: $myQuery + "and (max-width: " + $myMax + ")"; }
    @if $portrait { $myQuery: $myQuery + "and (orientation: portrait)"; }

    @media #{$myQuery} { 
        @content; 
    }
}

@mixin responds-to($breakpoints...) {
    $myQuery: null;

    @if length($breakpoints) == 1 {
        $myBreakpoint: map-get($breaks, nth($breakpoints, 1));
        $myWidth: map-get($myBreakpoint, min);

        $myQuery: "only screen and (min-width:" + $myWidth + ")";
    }

    @else if length($breakpoints) > 1 {
        @each $breakpoint in $breakpoints {
            $myBreakpoint: map-get($breaks, $breakpoint);

            $myMin: map-get($myBreakpoint, min);
            $myMax: map-get($myBreakpoint, max);
            
            $myCondition: "only screen and (min-width: " + $myMin + ") and (max-width: " + $myMax + ")";
            @if index($breakpoints, $breakpoint) == 1 {
                $myQuery: $myCondition;
            } @else {
                $myQuery: $myQuery + " , " + $myCondition;
            }
        }
    }

    @media #{$myQuery} { 
        @content; 
    }
}