A @mixin for retina images in sass

Using SASS we can combine media queries and CSS image replacement to send high resolution images to retina devices and standard resolution images everywhere else.

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

  @media (-webkit-min-device-pixel-ratio: 2), (-moz-min-device-pixel-ratio: 2) {
    & {
      background-image: url($filename + '@2x.' + $extension);
      -webkit-background-size: $width $height;
    }
  }
}

The mixin assumes our retina files are always named with the @2x between the filename and the extension (like our example myImage .png and myImage @2x .png ).