Mixin - Media Queries

media-queries.scss

/*/////////////////////////////////////////
/// MEDIA QUERIES
*/////////////////////////////////////////

/**
 * Mixins for defining media queries. These mixins should always be used
 * to define media query breakpoints.
 */

@mixin bp-min-width($width) {
    @media all and (min-width: $width) {
        @content;
    }
}

/**
 * Only use in rare circumstances, favour `bp-min-width`.
 */
@mixin bp-max-width($width) {
    @media all and (max-width: $width) {
        @content;
    }
}