media query handler mixin

mediaquery.scss

// Simple mixin when calling different viewports
// Remember - you can't extend within media-querys
//
// basic usage:
// @include respond(retina) { 
//   background-image: url('path/to/retina/image.png');
//   background-size: 100px 50px;
// }

// Store these in your global.scss
$is-print:     "print";
$is-mobile:    "(max-width: 480px)";
$is-tablet:    "(max-width: 768px)";
$is-retina:    "(-webkit-min-device-pixel-ratio: 1.5), (min--moz-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3/2), (min-device-pixel-ratio: 1.5)";
$is-desktop:   "(min-width: 1024px)";
$is-portrait:  "(oriantation: portrait)";
$is-landscape: "(orientation: landscape)";

@mixin respond($media) {

  @if $media == desktop {
    @media #{$is-desktop} { @content; }
  }
 
  @else if $media == tablet {
    @media #{$is-tablet} { @content; }
  }
 
  @else if $media == mobile {
    @media #{$is-mobile}  { @content; }
  }
 
  @else if $media == retina {
    @media #{$is-retina}  { @content; }
  }
 
  @else if $media == print {
    @media #{$is-print} { @content; }
  }
	
  @else if $media == portrait {
    @media #{$is-portrait} { @content; }
  }
 
  @else if $media == landscape {
    @media #{$is-landscape} { @content; }
  }

}