SASS/SCSS mixin for hidpi/retina devices. Altered from work by @kaelig: https://github.com/kaelig/hidpi/blob/master/_hidpi.scss

_hidpi.scss

@import 'compass/css3';

// Create a media query for hidpi (retina) devices. If `$image` is provided,
// generates CSS that sets the image as a background for both normal and hidpi
// screens, assuming that the hidpi version ends with `@2x` before the file
// extension. `$extension` must be supplied separately because Sass does not
// yet support string substitution (defaults to png).
//
// Note: assumes a Rails 3.1 environment using the asset pipeline with compass
// installed. Only minimal changes are needed for it to work elsewhere.
//
// Code altered from: http://git.io/hidpi
//
// Example:
//
//   #logo {
//     @include hidpi('my-logo');
//   }
//
//   // Compiles to...
//
//   #logo {
//     background-image: url(/assets/my-logo.png);
//     width: 404px;
//     height: 362px;
//   }
//   @media (-webkit-min-device-pixel-ratio: 1.3),
//          (-o-min-device-pixel-ratio: 2.6 / 2),
//          (min--moz-device-pixel-ratio: 1.3),
//          (min-device-pixel-ratio: 1.3),
//          (min-resolution: 1.3dppx) {
//     #logo {
//       background-image: url(/assets/[email protected]);
//       -webkit-background-size: 404px 362px;
//       -moz-background-size: 404px 362px;
//       -o-background-size: 404px 362px;
//       background-size: 404px 362px;
//     }
//   }
//
// You can omit `$image` to get only the media query, however both forms
// accept a content block to be included inside the media query:
//
//   @include hidpi {
//     background: red; // red background for hidpi devices!
//   }
//
@mixin hidpi($image: false, $extension: png) {
  @if $image {
    $image-fullname: '#{$image}.#{$extension}';
    $image-hidpi-fullname: '#{$image}@2x.#{$extension}';
    $width: image-width($image-fullname);
    $height: image-height($image-fullname);
    background-image: image-url('#{$image}.#{$extension}');
    width: $width;
    height: $height;
    @include media-hidpi {
      background-image: image-url($image-hidpi-fullname);
      @include background-size($width $height);
      @content;
    }
  } @else {
    @include media-hidpi { @content; }
  }
}

@mixin media-hidpi {
  @media (-webkit-min-device-pixel-ratio: 1.3),
         (-o-min-device-pixel-ratio: 2.6/2),
         (min--moz-device-pixel-ratio: 1.3),
         (min-device-pixel-ratio: 1.3),
         (min-resolution: 1.3dppx) {
    @content;
  }
}