Retina/HD SASS mix-in

readme

This is totally just a thought. Untested and unfinished. 

Trying to make sure images aren't needlessly being downloaded.

mixins.scss

@mixin hd($path, $img) {

    @media (-webkit-max-device-pixel-ratio: 1.49),
    (-o-max-device-pixel-ratio: 3/2.01),
    (max-device-pixel-ratio: 1.49) {
      background-image: url($path + "/" + $img);
    }

    @media (-webkit-min-device-pixel-ratio: 1.5),
    (-o-min-device-pixel-ratio: 3/2),
    (min-device-pixel-ratio: 1.5) {
      background-image: url($path + "/hd/" + $img);
      background-size: image-width($path + "/" + $img) image-height($path + "/" + $img);
    }

    .no-mq & {
      background-image: url($path + "/" + $img);
    }
  }

sample.scss

body {
  @include hd( "../img", "background-image.jpg");
}