SCSS ESSENTIAL MEDIA QUERIES

SCSS ESSENTIAL MEDIA QUERIES.scss

@mixin respond-to($media) {
     @if $media == mobile{
        @media only screen and (max-width: $break-small) {
             @content;
        }
    }
    @else if $media == tablet {
         @media only screen and (min-width: $break-small + 1) and (max-width: $break-large - 1){
            @content;
        }
    }
    @else if $media == desktop {
         @media only screen and (min-width: $break-large){
            @content;
        }
    }
    @else {
         @media only screen and (min-width: $break-small + 1) and (max-width: $break-large - 1){
            @content;
        }
    }
}