Responsive mixin

SASS responsive mixin

$tabletMaxWidth: 1024px - 40px; //1020px - 40px; //980px
$mobileMaxWidth: 640px - 40px; //600px

@mixin respond-to($media) {
    @if $media == mobile {
        @media screen and (max-width: $mobileMaxWidth) { 
            @content; 
        }
    }
    @else if $media == tablet {
        @media screen and (min-width: $mobileMaxWidth + 1) and (max-width: $tabletMaxWidth - 1) { 
            @content; 
        }
    }
    @else if $media == mix {
        @media screen and (max-width: $tabletMaxWidth - 1) { 
            @content; 
        }
    }
    @else {
        @media screen and (max-width: $media) { 
            @content; 
        }
    }
}