SCSS: Media queries mixin

_media-queries

=respond-to($device)
  @if $device == handheld
    @media only screen and (min-width : 320px)
      @content

  @if $device == tablet
    @media only screen and (min-width : 600px)
      @content

  @if $device == tablet-landscape
    @media only screen and (min-width : 600px) and (orientation : landscape)
      @content

  @if $device == tablet-portrait
    @media only screen and (min-width : 600px) and (orientation : portrait)
      @content

  @if $device == tablet-large
    @media only screen and (min-width : 768px)
      @content

  @if $device == desktop
    @media only screen and (min-width : 1024px)
      @content

  @if $device == desktop-large
    @media only screen and (min-width : 1824px)
      @content

  @if $device == retina-display
    @media only screen and (-webkit-min-device-pixel-ratio: 2)
      @content

/* Implementation

h2
  color: #523611
  font-weight: bold
  margin-bottom: 1.0em
  +respond-to(handheld)
    font-size: 1.0em
    text-align: center
  +respond-to(tablet)
    font-size: 1.2em
    text-align: left
  +respond-to(desktop)
    font-size: 1.5em

http://blog.littlelines.com/post/30586881387/littlelines-responds

*/