/**
 * Wraps any styles in a retina media query.
 */
@mixin retina {
  /**
   * Option variable to turn on/off IE8 support.
   *
   * This requires Modernizr's test for `css-mediaqueries` and RespondJS
   *
   * Set to `1` to turn on support.
   */
  $retina-support-respondjs: 0 !default;

  @media (-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), (min-resolution: 144dpi) {
    // Note: Respond.js does not support pixel-ratio media queries so older browsers (IE8) will apply styles defined within the query.
    // To hide the styles from IE8, add the code within html.mediaqueries
    @if ($retina-support-respondjs == 1) {
      html.mediaqueries & {
        @content;
      }
    }
    @else {
      @content;
    }
  }
}