SCSS - Conditional Media Query Mixin

conditional-media-query-mixin.scss

/**
 * Conditional Media Query Mixin.
 * Usage: @include media(xs) { ... }, @include media(sm) { ... }, ...
 *
 * Other elegant and nice solutions:
 * http://css-tricks.com/approaches-media-queries-sass
 *
 * The best solution to get total control of the conditions:
 * https://github.com/eduardoboucas/include-media
 * http://davidwalsh.name/sass-media-query
 */

/**
 * Solution 1. Standalone mixin.
 *
 * Cons:
 * It is so redundant, we have to write everything twice.
 *
 * References:
 * http://css-tricks.com/conditional-media-query-mixins
 * http://css-tricks.com/snippets/css/retina-display-media-query
 */
@mixin media($value) {
    $media-xs: "only screen and (min-width : 480px)";
    $media-sm: "only screen and (min-width : 768px)";
    $media-md: "only screen and (min-width : 992px)";
    $media-lg: "only screen and (min-width : 1200px)";
    $media-retina2x: "only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2/1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi),only screen and (min-resolution: 2dppx)";

    @if $value == xs {
        @media #{$media-xs} { @content; }
    }
    @else if $value == sm {
        @media #{$media-sm} { @content; }
    }
    @else if $value == md {
        @media #{$media-md} { @content; }
    }
    @else if $value == lg {
        @media #{$media-lg} { @content; }
    }
    @else if $value == retina2x {
        @media #{$media-retina2x} { @content; }
    }
}

/**
 * Solution 2. Configurable mixin.
 *
 * Cons:
 * It doesn't allow complex media queries.
 *
 * References:
 * http://www.sitepoint.com/managing-responsive-breakpoints-sass/
 * http://css-tricks.com/snippets/sass/mixin-manage-breakpoints/
 */
$media-values: (
    'xs': (min-width : 480px),
    'sm': (min-width : 768px),
    'md': (min-width : 992px),
    'lg': (min-width : 1200px)
) !default;

@mixin media($value) {
    // If the key exists in the map
    @if map-has-key($media-values, $value) {
        // Prints a media query based on the value
        @media only screen and #{inspect(map-get($media-values, $value))} {
            @content;
        }
    }
    // If the key doesn't exist in the map
    @else {
        @warn "Unfortunately, no value could be retrieved from `#{$value}`. "
            + "Available values are: #{map-keys($media-values)}.";
    }
}