Less CSS Retina Mixin

output.css

#element{
  background-image: url('/images/sprite.png');
  background-repeat: no-repeat;
  background-position: -3px 0;
}

@media print, screen,
  (-webkit-min-device-pixel-ratio: 1.25),
  (~`"-o-min-device-pixel-ratio: 1.25/1"`),
  (min--moz-device-pixel-ratio: 1.25),
  (-moz-min-device-pixel-ratio: 1.25),
  (-ms-min-device-pixel-ratio: 1.25),
  (min-device-pixel-ratio: 1.25),
  (min-resolution: 120dpi),
  (min-resolution: 1.25dppx) {
    #element{
      background-size: 100px auto;
      background-image: url('/images/[email protected]');
      background-position: -20px 0;
    }
}

retina.less

.retina-image(@file, @type, @repeat, @width, @height, @posx, @posy) {
  background-image: url('@{file}.@{type}');
  background-repeat: @repeat;
  background-position: @posx @posy;

  @media print, screen,
    (-webkit-min-device-pixel-ratio: 1.25),
    (~`"-o-min-device-pixel-ratio: 1.25/1"`),
    (min--moz-device-pixel-ratio: 1.25),
    (-moz-min-device-pixel-ratio: 1.25),
    (-ms-min-device-pixel-ratio: 1.25),
    (min-device-pixel-ratio: 1.25),
    (min-resolution: 120dpi),
    (min-resolution: 1.25dppx) {
      background-size: @width @height;
      background-image: url('@{file}@2x.@{type}');
      background-position: @posx * 2 @posy * 2;
    }
}

//Example
#element{
  .retina-image('/images/sprite','png', no-repeat, 100px, auto, -10px, 0);
}

I don't think you really want to be mixing print, screen, like that, do you? Every comma is an OR condition! Maybe (print, screen) and ( (...), (...), ... ), if the syntax supports that....?

Nice Job!