Retina SASS mix-in

hd-images.scss

@mixin hd($defaultPath, $hdPath) {
  // the non-hd image - use data URI for this
  background-image: inline-image($defaultPath);
  // the IE fall-back for non-data URI support
  .lt-ie9 & {
    background-image: image-url($defaultPath);
  }
  // the HD version - use regular image path to prevent downloading non-hd version, too
  @media (-webkit-min-device-pixel-ratio: 1.5),(-o-min-device-pixel-ratio: 3/2),(min-device-pixel-ratio: 1.5) {
    background-image: image-url($hdPath);
    background-size: image-width($defaultPath) image-height($defaultPath);
  }
}