Retina Sass

_retina.scss

/* mixin for retina background images */
@mixin background-image-retina($file, $type, $width, $height) {
  width: $width+px;
  height: $height+px;
  background-image: image-url($file + '.' + $type);
  background-repeat: no-repeat;
  background-position: 0% 50%;
  text-indent: -9999px;
  overflow: hidden;
  text-align: left;
  // note, sass spits out the mixin last and IE8 picks this up
  @media (-webkit-min-device-pixel-ratio: 2) {
    & {
      background-image: image-url($file + '@2x.' + $type);
      background-size: $width+px $height+px;
    }
  }
  .ie8 & {
    background-image: image-url($file + '.' + $type);
  }
  .ie7 & {
    background-image: image-url($file + '.' + $type);
  }
}

/* scss use */
@include background-image-retina("logo", "png", 133, 23 );