sass - mixin retina images

sass - mixin retina images

// mixin retina images
@mixin background-image-retina($file, $type, $width, $height) {
  background-image: url($file + '.' + $type);

  @media
  only screen and (-webkit-min-device-pixel-ratio: 1.5),
  only screen and (-o-min-device-pixel-ratio: 3/2),
  only screen and (min--moz-device-pixel-ratio: 1.5),
  only screen and (min-device-pixel-ratio: 1.5) {
    & {
      background-image: url($file + '@2x.' + $type);
      -moz-background-size:     $width $height;
      -webkit-background-size:  $width $height;
      -o-background-size:       $width $height;
      background-size:          $width $height;
    }
  }
}