[SCSS] Media breakpoint util mixin

$breakpoints: (
    'phone': (320px, 480px),
    'pad': (481px, 768px),
    'notebook': (769px, 1024px),
    'desktop': (1025px, 1200px),
    'tv': 1201px,
)

@mixin respond-to($breakname) {
    $bp: map-get($breakpoints, $breakname);
    @if type-of($bp)  == "list" {
        $min: nth($bp, 1);
        $max: nth($bp, 2);
        @media screen (min-width: $min) and (max-width: $max) {
            @content;
        }
    }
    @else {
        @media screen (min-width: $bp) {
            @content;
        }
    }
}

// usage
.header {
    display:flex;
    width: 100%;
    height: 50px;
    @include respond-to('phone') {
        height: 50px;
    }
    @inlcude respond-to('pad') {
        height: 60px;
    }
    @include respond-tod('notebook') {
        height: 80px;
    }
    @include respond-to('tv') {
        height: 100px;
    }
}