retina-ready sass mixin

retina.css.scss

/*
 * Retina helper mixins for Compass
 */

@import "compass/css3/background-size";

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

  @media only screen and (-webkit-min-device-pixel-ratio: 2)
  {
    $image2x: ($file + '@2x.' + $type);
    background-image: image-url($image2x);
    @include background-size(image-width($image) auto);
  }
}

@mixin image-replacement($file, $type) {
  @include background-image-retina($file, $type);
  background-position: 0 0;
  background-repeat: no-repeat;
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
  display: block;
}

add image replacement mixin