SASS Media Queries done right

sass-media-query.css.scss

/**
Targets small screen sizes and below, hides CSS from all other sizes
@example

@include screen-small {
    #main {
        width: auto;
        background: #000;
    }
}
*/
@mixin screen-small {
    @media screen and (max-width: $max-width) {
        @content;
    }
}

/**
Custom screen size for small media queries
@example

@include screen-small(300px) {
    #main {
        width: auto;
        background: #000;
    }
}
*/
@mixin screen-small-custom($size) {
    @media screen and (max-width: $size) {
        @content;
    }
}

// Targets large screens
// @see screen-small
@mixin screen-large {
    @media screen and (min-width: $min-width) {
        @content;
    }
}

// Custom large screen sizes
// @see screen-small
@mixin screen-large-custom($size) {
    @media screen and (min-width: $size) {
        @content;
    }
}