_background-image-retina.scss

@import "compass";

 /*
  * Including retina images
  * Based on https://gist.github.com/twe4ked/1432554
  * 
  * How to use:
  * @include background-image-retina('foobar', 'png', 10px, 20px);
  */
@mixin background-image-retina($file, $type, $width, $height) {
  background-image: image-url($file + '.' + $type);

  @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (-moz-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2/1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx) { 
    & {
      background-image: image-url($file + '@2x.' + $type);
      @include background-size($width $height);
    }
  }
}