Sass media queries

_media_queries.sass

// Standard device screen widths
$iphone-portrait: 320px
$iphone-landscape: 480px
$ipad-portrait: 767px
$ipad-landscape: 980px
$desktop: 1224px
$desktop-large: 1824px

// General device targeting
// Use: Only use if you want the style to apply to many devices
// Example:
//     +apply_to(smaller-than, iphone-portrait)
// will apply CSS to anything smaller than an iPhone-portrait
=apply_to($ltgt, $device)

  $extrema: null

  @if $ltgt == less-than
    $extrema: max

  @if $ltgt == greater-than
    $extrema: min

  @if $device == iphone-landscape
    @media only screen and (#{$extrema}-width: $iphone-landscape)
      @content

  @if $device == iphone-portrait
    @media only screen and (#{$extrema}-width: $iphone-portrait)
      @content

  @if $device == ipad-landscape
    @media only screen and (#{$extrema}-width: $ipad-landscape)
      @content

  @if $device == ipad-portrait
    @media only screen and (#{$extrema}-width: $ipad-portrait)
      @content

  @if $device == desktop
    @media only screen and (#{$extrema}-width: $desktop)
      @content

  @if $device == desktop-large
    @media only screen and (#{$extrema}-width: $desktop-large)
      @content

// Specific device targeting
// Use: Only use if you want the style to respond to one device
// Example:
//     +respond_to(ipad-landscape)
// will apply CSS only to an iPad at landscape rotation
=respond-to($device)

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

  @if $device == iphone
    @media only screen and (min-width: $iphone-portrait) and (max-width: $iphone-landscape)
      @content

  @if $device == iphone-landscape
    @media only screen and (min-width: $iphone-portrait) and (max-width: $iphone-landscape) and (orientation: landscape)
      @content

  @if $device == iphone-portrait
    @media only screen and (max-width: $iphone-portrait) and (max-width: $iphone-landscape) and (orientation: portrait)
      @content

  @if $device == ipad
    @media only screen and (min-width: $ipad-portrait) and (max-width: $ipad-landscape)
      @content

  @if $device == ipad-landscape
    @media only screen and (min-width: $ipad-portrait) and (max-width: $ipad-landscape) and (orientation: landscape)
      @content

  @if $device == ipad-portrait
    @media only screen and (max-width: $ipad-portrait) and (max-width: $ipad-landscape) and (orientation: portrait)
      @content

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

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