Retina image mixin

retina-mixin

// Retina images 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) {
    
    // Use retina image and set width and height
    background-image: url($image);
    background-size: $width $height;
    
  }
  
}

retina-mixin-output.css

.background-image-and-retina {
  background-position: 0 0;
  background-repeat: no-repeat;
  background-image: url("/assets/img/sprite-sheet.png");
}

@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) {
  .background-image-and-retina {
    background-image: url("/assets/img/sprite-sheet@2x.png");
    background-size: 500px 300px;
  }
}

retina-mixin-usage

.background-image-and-retina {
  background-position: 0 0;
  background-repeat: no-repeat;
  background-image: url("/img/sprite-sheet.png");
  @include image-2x( "/img/sprite-sheet@2x.png", 100px, 100px);
}