Sass Mixin for Responsive Media Queries

// variables for width
$sm: 480px;
$lg: 1170px;

// mixin for responsive web design breakpoints
@mixin break-point($media) {
    @if $media == mobile {
        @media only screen and (max-width: $sm) {
            @content;
        }
    }
    @else if $media == tablet {
        @media only screen and (min-width: $sm + 1) and (max-width: $lg - 1) {
            @content;
        }
    }
    @else if $media == desktop {
        @media only screen and (min-width: $lg) {
            @content;
        }
    }
}

// use
.brand {
    display: inline-block;
    max-width: 100px;

    @include break-point(mobile) { width: 100% ;}
    @include break-point(tablet) { width: 125px; }
    @include break-point(desktop) { float: none; }
}