Retina images SASS mixin generates the media query for retina display and uses the retina background image with background size in both pixels and REM units.

Retina Images SASS Mixin.scss

// -----------------------------------------

	// Retina Images
	
// -------------------------------------------

// example: @include retina("logo2x.png", 100, 50);

@mixin retina($image, $width, $height) {
  @media (min--moz-device-pixel-ratio: 1.3),
         (-o-min-device-pixel-ratio: 2.6/2),
         (-webkit-min-device-pixel-ratio: 1.3),
         (min-device-pixel-ratio: 1.3),
         (min-resolution: 1.3dppx) {
    background-image: url($image);
    background-size: $width + px $height + px;
    background-size: $width / 16 + rem $height / 16 + rem;
  }
}