Sass (SCSS) mixin for including retina images (useful when developing for iOS).

input.scss

@mixin background-image-retina($file, $type, $width, $height) {
  background-image: url($file + '.' + $type);

  @media (-webkit-min-device-pixel-ratio: 2), (-moz-min-device-pixel-ratio: 2) {
    & {
      background-image: url($file + '@2x.' + $type);
      -webkit-background-size: $width $height;
    }
  }
}

// Example
#foo {
  @include background-image-retina('foobar', 'png', 10px, 20px);
  background: repeat;
}

output.css

#foo {
  background-image: url("foobar.png");
  background: repeat; }
  @media (-webkit-min-device-pixel-ratio: 2), (-moz-min-device-pixel-ratio: 2) {
    #foo {
      background-image: url("foobar@2x.png");
      -webkit-background-size: 10px 20px; } }