simple 2x images in LESS

2x-bg-images.less

// Sets a 1x and a 2x background-image on an element.
// 
// Arguments:
// @path - a String path to the 1x version of the image. The 2x version of this
//         image must exist in the same directory as the 1x and have "_2x" at
//         the end of its filename.
// @size - the value for the background-size attribute (e.g. 10px 20px; 100%).
.bg-image(@path, @size) {
  background-image: url(@path);
  background-size: @size;
  
  @media (min--moz-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3/2), (-webkit-min-device-pixel-ratio: 1.5), (min-device-pixel-ratio: 1.5), (min-resolution: 1.5dppx){
    background-image: replace(@path, "\.([a-zA-Z]{3,4})$", "_2x.$1");
  }
}