Sass retina background mixin

Like me you are a front-end ninja and you follow the DRY principes. Here is a pretty cool mixin to generate a background image for retina display.

I Suppose you have already defined a variable $retina somewhere in your scss files.

$retina: "only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2/1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx)";

mixin

@mixin retina-background-image($file, $type, $width, $height) {
  background-image: url($file + '.' + $type);
  @media #{$retina} {
    background-image: url($file + '@2x.' + $type);
    @include background-size($width, $height);
  }
}

Usage

You just define the image path, the image type and eventually the background-size

@include retina-background-image("images/video", "png", 50%, 50%);