Easy retina-ready images using SCSS + Compass

gistfile1.scss

@mixin background-2x($background, $file: 'png'){
  $image: #{$background+"."+$file};
  $image2x: #{$background+"2x."+$file};

  background: image-url($image) no-repeat;
  @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: image-url($image2x);
      background-size: image-width($image) image-height($image);
   }
}

// usage for „logo.png” + „logo2x.png”
.logo{
  @include background-2x('logo');
}

// usage for „logo.jpg” + „logo2x.jpg”
.logo{
  @include background-2x('logo', 'jpg');
}