Sassy Retina Media Query Mixin

Media Query for SCSS/Compass for multiple display media queries, with optional Retina support. Take a look at this gist for forking and whatnot.

Based on @chriscoyier's work on retina media queries.

@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 }
            }
        }
    }