Media Queries Sass Mixins

mixins.scss

// $Media $Queries
@mixin above($value, $width: true) {
    @if $width {
        @media (min-width: em($value)) {
            @content;
        }
    } @else {
        @media (min-height: em($value)) {
            @content;
        }
    }
}

@mixin below($value, $width: true) {
    @if $width {
        @media (max-width: em($value)) {
            @content;
        }
    } @else {
        @media (max-height: em($value)) {
            @content;
        }
    }
}

@mixin between($minValue, $maxValue, $width: true) {
    $minValue: em($minValue);
    $maxValue: em($maxValue);
    @if $width {
        $from: '(min-width: #{$minValue})';
        $to: '(max-width: #{$maxValue})';
        $media: $from + ' and ' + $to;
        @media #{$media} {
            @content;
        }
    } @else {
        $from: '(min-height: #{$minValue})';
        $to: '(max-height: #{$maxValue})';
        $media: $from + ' and ' + $to;
        @media #{$media} {
            @content;
        }
    }
}

// $Convert Pixels to Ems
@function em($pixels, $context: $browserContext) {
    @if (unitless($pixels)) { $pixels: $pixels * 1px; }
    @if (unitless($context)) { $context: $context * 1px; }
    @return $pixels / $context * 1em;
}