SCSS media query helpers

_media.scss

/*
 * Media query helpers
 *
 * DEVICES:
 *   mobile = up to, but not including landscape iPhone 6 (< 736px)
 *   tablet = landscape iPhone 6 up to but not including landscape iPad (>= 736px && < 1024px)
 *   desktop = landscape iPad and greater
 *
 * COMBOS:
 *   compact = mobile & tablet
 *   regular = tablet & desktop
 *
 * SCSS USAGE:
 *   @include respond(mobile) {
 *      ... mobile-only styles ...
 *   }
 *
 * CLASSES:
 *   The "media-classes" mixin allows you to generate a set of css classes that can be used in your html to easily show
 *   or hide elements.
 *
 *   Each of the devices (and device combos) will have a css class in the format "device-{TYPE}"
 *
 *   The classes will automatically hide the element using "display: none" and only display them on the
 *   appropriate device sizes.
 *
 *   EXAMPLE:
 *   <span class="device-mobile"></span> <!-- This element will only be displayed on mobile devices -->
 *   <div class="device-compact"></div> <!-- This element will only be displayed on compact (mobile & tablet) devices -->
 *
 */

$device-mobile-max: 735px;
$device-tablet-min: 736px;
$device-tablet-max: 1023px;
$device-desktop-min: 1024px;

@mixin respond($size, $max: none) {
    @if $size == mobile {
        @media only screen and (max-width: $device-mobile-max) {
            @content
        }
    }
    @elseif $size == tablet {
        @media only screen and (min-width: $device-tablet-min) and (max-width: $device-tablet-max) {
            @content
        }
    }
    @elseif $size == desktop {
        @media only screen and (min-width: $device-desktop-min) {
            @content
        }
    }
    @elseif $size == compact {
        @media only screen and (max-width: $device-tablet-max) {
            @content
        }
    }
    @elseif $size == regular {
        @media only screen and (min-width: $device-tablet-min) {
            @content
        }
    }
    @elseif $max == none {
        @media only screen and (min-width: $size) {
            @content
        }
    }
    @elseif $max != none {
        @media only screen and (min-width: $size) and (max-width: $max) {
            @content
        }
    }
}

@mixin media-classes() {

    @include respond(mobile) {
        .device-tablet, .device-desktop, .device-regular { display: none !important; }
    }

    @include respond(tablet) {
        .device-mobile, .device-desktop { display: none !important; }
    }

    @include respond(desktop) {
        .device-mobile, .device-tablet, .device-compact { display: none !important; }
    }

    @include respond(compact) {
        .device-desktop { display: none !important; }
    }

    @include respond(regular) {
        .device-mobile { display: none !important; }
    }

}