Sass mixin for retina images.

retina-mixin.scss

@mixin at2x($image_name, $w: auto, $h: auto, $extention: '.png') {
  background-image: image-url($image_name + $extention);
  $x2img : $image_name + '@2x' + $extention;
  
  @media screen and (-webkit-min-device-pixel-ratio : 1.5) {
    background-image: image-url($x2img);
    background-size: $w $h;
  }
}

// Roep aan met deze include:
@include at2x('logo', 270px, 67px);

// Als je ander formaat dan png wilt includen, dan moet je een extra extensie parameter meegeven:
@include at2x('logo', 270px, 67px, '.jpg');