Retina Images SCSS Mixin

BLOG

Für alle die gerne für Retina Displays optimieren möchten und zudem mit SCSS arbeiten gibt es ein SCSS mixin das die ganze Sache erheblich vereinfacht.

Hat man das mixen eingebunden muss nur der Bildpfad angegeben werden und die Device unabhängige Größe des Bildes.

z.B.:

div.Bild { background: url("meinBild.png") no-repeat; @include image-2x("meinBild.png", 100px, 25px); }

Und hier ist das mixin

@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; } }

Originalbeitrag: http://signalvnoise.com/posts/3271-easy-retina-ready-images-using-scss