output.css

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

@media (min--moz-device-pixel-ratio: 1.25),
         (-webkit-min-device-pixel-ratio: 1.25),
         (min-device-pixel-ratio: 1.25),
         (min-resolution: 1.25dppx) {
    #element{
      background-size: 100px auto;
      background-image: url('/images/sprite@2x.png');
      background-position: -20px 0;
    }
}

retina.less

.retina-image(@file, @type, @size: cover, @repeat: no-repeat, @posx: 0, @posy: 0) {
  background-image: url('@{file}.@{type}');
  background-repeat: @repeat;
  background-position: @posx @posy;

  @media (min--moz-device-pixel-ratio: 1.25),
         (-webkit-min-device-pixel-ratio: 1.25),
         (min-device-pixel-ratio: 1.25),
         (min-resolution: 1.25dppx) {
      background-size: @size;
      background-image: url('@{file}@2x.@{type}');
      background-position: @posx * 2 @posy * 2;
    }
}

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

Simplified use of original a bit. I mostly use retina images for logos and icons all positioned 0, 0 so by using defaults the syntax is easier to remember. You can get away with as little as .retina-image("myimage", "png");