Sehr praktisches @mixin für Retina-Bilder per SCSS. Bisher habe ich es nicht genutzt, sondern die paar Bilder die nötig waren mit SVG eingebaut, in Zukunft wird es aber sicher immer interessanter. Ich würde das @mixin allerdings nicht “image-2x” nennen, sondern einfach “retina”.

If you’re interested in adding retina image support to your website or app and you happen to be using SCSS, here’s a handy shortcut that makes it dead simple.

@mixin image-2x($image, $width, $height) {
  @media (min--moz-device-pixel-ratio: 1.3),
         (-o-min-device-pixel-ratio: 2.6/2),
         (-webkit-min-device-pixel-ratio: 1.3),
         (min-device-pixel-ratio: 1.3),
         (min-resolution: 1.3dppx) {
    /* on retina, use image that's scaled by 2 */
    background-image: url($image);
    background-size: $width $height;
  }
}