mixin for retina images. ( _2x image for retina devices ).

retinafy.scss

/*
This is very basic mixin I created to cater retina images ( 2x ).
Modify this to suit your requirement.
*/
@mixin retinafy($file, $type : png, $width : auto, $height : auto, $suffix : _2x) {
  background-image: url($file + '.' + $type);
 
  @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: url($file + $suffix + '.' + $type);
        background-size: $width $height;
     
  }
}

/* Example */
.glass {
    @include retinafy( '/images/glass' , png , auto , 16px );
}

Corresponding less code

.retinafy(@file, @type : png, @width : auto, @height : auto, @suffix : _2x) {
  background-image: url("@{file}.@{type}");

  @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: url("@{file}@{suffix}.@{type}");
        background-size: @width @height;

  }
}