Retina Grafiken SCSS Snippet (Inkl. IPhone 6+ @3x)

Für jeden der öfters mal mit SCSS Retina Grafiken abfangen möchte, hier ein kleines Snippet (Mixin) aus meiner Sammlung.

Funktioniert mit @2x und @3x – IPhone 6+ und alle High Res Geräte sind damit dann gleich abgedeckt !

@mixin retina_background ($path, $type, $size) {
  // $path = full path without format, /data/image
  // $type = file format  , png


  @media
  screen and (-webkit-min-device-pixel-ratio: 2),
  screen and (min-resolution: 192dpi),
  screen and (min-resolution: 2dppx) {
    background-image:url('#{$path}@2x.#{$type}');
    background-size: $size;
  }
  @media
  screen and (-webkit-min-device-pixel-ratio: 3),
  screen and (min-resolution: 3dppx),
  screen and (min-resolution: 350dpi){
    background-image:url('#{$path}@3x.#{$type}');
    background-size: $size;
  }
}

Die Nutzung ist ultra Simpel :

SELECTOR{
  background-image: url('Kompletter Pfad zur Datei ');
  @include retina_background('Pfad zur Datei ohne Format Endung ', 'Format', Background Size);
}
----
UL.field_list {
  background-image: url('/resources/bild.png');
  @include retina_background('/resources/bild', 'png', 50%);
}