SCSS Media Queries with Retina Support

mq.css

@mixin respond-to($media, $retina: true) {

    // Settings
    $small  : 320px;
    $medium : 700px;
    $large  : 1300px;

    @if $media == 'small' {
        @if $retina == true {
            @media
            only screen and (-webkit-min-device-pixel-ratio: 2)      and (min-width: #{$small}),
            only screen and (   min--moz-device-pixel-ratio: 2)      and (min-width: #{$small}),
            only screen and (     -o-min-device-pixel-ratio: 2/1)    and (min-width: #{$small}),
            only screen and (        min-device-pixel-ratio: 2)      and (min-width: #{$small}),
            only screen and (                min-resolution: 192dpi) and (min-width: #{$small}),
            only screen and (                min-resolution: 2dppx)  and (min-width: #{$small}) { @content }
        } @else {
            @media only screen and (min-width: #{$small}) { @content }
        }
    } @else if $media == 'medium' {
        @if $retina == true {
            @media
            only screen and (-webkit-min-device-pixel-ratio: 2)      and (min-width: #{$medium}),
            only screen and (   min--moz-device-pixel-ratio: 2)      and (min-width: #{$medium}),
            only screen and (     -o-min-device-pixel-ratio: 2/1)    and (min-width: #{$medium}),
            only screen and (        min-device-pixel-ratio: 2)      and (min-width: #{$medium}),
            only screen and (                min-resolution: 192dpi) and (min-width: #{$medium}),
            only screen and (                min-resolution: 2dppx)  and (min-width: #{$medium}) { @content }
        } @else {
            @media only screen and (min-width: #{$medium}) { @content }
        }
    } @else if $media == 'large' {
        @if $retina == true {
            @media
            only screen and (-webkit-min-device-pixel-ratio: 2)      and (min-width: #{$large}),
            only screen and (   min--moz-device-pixel-ratio: 2)      and (min-width: #{$large}),
            only screen and (     -o-min-device-pixel-ratio: 2/1)    and (min-width: #{$large}),
            only screen and (        min-device-pixel-ratio: 2)      and (min-width: #{$large}),
            only screen and (                min-resolution: 192dpi) and (min-width: #{$large}),
            only screen and (                min-resolution: 2dppx)  and (min-width: #{$large}) { @content }
        } @else {
            @media only screen and (min-width: #{$large}) { @content }
        }
    }
}

// Example
@include respond-to(small, true) {
    body { background: orange; }
}

Adding settings.

Adding settings.