Media Queries Sass Mixin

Here a media queries Sass mixin I ussually use in project.

Media Queries Responsive

$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;
    }
}

How to use

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);
  }  
}

Compile code

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);
  }
}

Demo Code: http://codepen.io/dangvanthanh/pen/JHpEB

Also thanks to Thomas Fuchs about media queries for retina: http://mir.aculo.us/2012/11/28/the-ultimate-target-retina-screens-media-query/