Consultas de mídia Sass Mixin

Aqui está um media queries Sass mixin que eu costumo usar no projeto.

Consultas de mídia responsivas

$phone : '(max-width: 480px)';
$tablet
-portrait: '(max-width: 767px)';
$tablet
-landscape: '(min-width: 768px) and (max-width: 979px)';
$large
-desktop: '(min-width: 1200px)';
$non
-retina: 'screen and (-webkit-max-device-pixel-ratio: 1)';
$retina
: '(min--moz-device-pixel-ratio: 1.5),
(-o-min-device-pixel-ratio: 3/2),

(-webkit-min-device-pixel-ratio: 1.5),

(min-device-pixel-ratio: 1.5),

(min-resolution: 144dpi),

(min-resolution: 1.5dppx)'
;

@mixin respond-to($media) {
@media only screen and #{$media} {
@content;
}
}

Como usar

body {
background
-color: rgba(#1abc9c, .5);
@include respond-to($phone) {
background
-color: rgba(#2ecc71, .5);
}
@include respond-to($tablet-portrait) {
background
-color: rgba(#3498db, .5);
}
@include respond-to($tablet-landscape) {
background
-color: rgba(#9b59b6, .5);
}
}

Compilar o código

body {
background
-color: rgba(26, 188, 156, 0.5);
}
@media only screen and (max-width: 480px) {
body
{
background
-color: rgba(46, 204, 113, 0.5);
}
}
@media only screen and (max-width: 767px) {
body
{
background
-color: rgba(52, 152, 219, 0.5);
}
}
@media only screen and (min-width: 768px) and (max-width: 979px) {
body
{
background
-color: rgba(155, 89, 182, 0.5);
}
}

Código de demonstração: http://codepen.io/dangvanthanh/pen/JHpEB

Também agradeço a Thomas Fuchs sobre consultas de mídia para retina: http://mir.aculo.us/2012/11/28/the-ultimate-target-retina-screens-media-query/