Retina Images Mixin

retina-mixins.scss

//create mixin to handle scaling of retina images
@mixin image-2x($image, $width, $height) {
  @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: url($image);
    background-size: $width $height;
  }
}

.element {
  //non-retina image 
  background:url('images/sample.png') center center no-repeat;

  //retina image: src, rendered width, rendered height (these are the dimensions of the non-retina sized image)
  @include image-2x("images/sample2x.png", 15px, 14px);
}