_retina-image.scss

@mixin retina-image($filename, $background-size, $extension: png, $retina-suffix: _2x, $superretina-suffix: _3x) {
  background-image: url("#{$filename}.#{$extension}");
  
  @media (min--moz-device-pixel-ratio: 1.3),
         (-o-min-device-pixel-ratio: 1.3/1),
         (-webkit-min-device-pixel-ratio: 1.3),
         (min-device-pixel-ratio: 1.3),
         (min-resolution: 1.3dppx) {
    background-image: url("#{$filename}#{$retina-suffix}.#{$extension}");
  }
  
  @media (min--moz-device-pixel-ratio: 2.6),
         (-o-min-device-pixel-ratio: 2.6/1),
         (-webkit-min-device-pixel-ratio: 2.6),
         (min-device-pixel-ratio: 2.6),
         (min-resolution: 2.6dppx) {
    background-image: url("#{$filename}#{$superretina-suffix}.#{$extension}");
  }
  
  background-size: $background-size;
}