Painless retina images in Sass. Requires Compass.

retina-images.scss

// Painless Retina Images:
// =======================
// https://gist.github.com/adamjohnson/5406454
// http://blog.andrewckor.com/post/43347215341/retina-background-images-sass-mixin
// Requires Compass
// Suffix retina imagery with "@2x" & put in the same directory as normal assets (or specifiy a different directory in the @include)
@mixin bg-with-retina( $path, $img, $filetype, $size  ) {
   background-image: image-url( $path + $img + '.' + $filetype );
   @include background-size( $size );
    
  @media print,
         (-o-min-device-pixel-ratio: 5/4),
         (-webkit-min-device-pixel-ratio: 1.25),
         (min-resolution: 120dpi) {
    
      & {
         background-image: image-url($path + $img + '@2x' + '.' + $filetype);
      }
    
   }
}

// Usage example:
// .cool {
//    width: 150px;
//    height: 40px;
//    @include bg-with-retina( 'images/', 'cool', 'png', 150px 40px ); // FORMAT: (1)path, (2)image name, (3)file type, (4)width, (5)height
// }