mq.scss

_mq.scss

// A mixin which creates a media query, turns your pixel value into ems and will spit out the code for old IE if you choose.
// $type = the type of media query e.g. min-width
// $pxbp = your breakpoint in px (you can use the px unit for verbosity)
// $legacy = true/false, whether you want the code to be seen by old IE

@mixin mq($type, $pxbp, $legacy) {

    $bp: strip-unit($pxbp);

    // Calculate the em value of the desired breakpoint.
    $embp: $bp / 16;

    // Don't wrap the code in a media query.
    @if ($old-ie == true and $legacy == true) {
        @content;
    }

    // Do wrap the code in a media query.
    @else {
        @media ($type: $embp + em) {
            @content;
        }
    }
}