LESS mixin for setting different image densities and background sizes

img-density.less

// image densities
// --------------------------------------------------
@img-path: "img/";

.img-density(@file, @img-width:100%, @img-height:auto) {
  @basefile: ~`(function(){ return @{file}.replace(/([^\.]*)\.(.*)/, '$1'); })()`;
  @ext: ~`(function(){ return @{file}.replace(/([^\.]*)\.(.*)/, '$2'); })()`;
  background-image: url("@{img-path}@{basefile}.@{ext}");
  background-size: @img-width @img-height;
  @media
  only screen and (-webkit-min-device-pixel-ratio: 2),
  only screen and (   min--moz-device-pixel-ratio: 2),
  only screen and (     -o-min-device-pixel-ratio: 2/1),
  only screen and (        min-device-pixel-ratio: 2),
  only screen and (                min-resolution: 192dpi),
  only screen and (                min-resolution: 2dppx) {
    background-image: url("@{img-path}@{basefile}@2x.@{ext}");
  }
  @media
  only screen and (-webkit-min-device-pixel-ratio: 3),
  only screen and (   min--moz-device-pixel-ratio: 3),
  only screen and (     -o-min-device-pixel-ratio: 3/1),
  only screen and (        min-device-pixel-ratio: 3),
  only screen and (                min-resolution: 288dpi),
  only screen and (                min-resolution: 3dppx) {
    background-image: url("@{img-path}@{basefile}@3x.@{ext}");
  }
}


// usage
.icon-mail {
    .img-density("icon-mail.png", 24px, 24px);
}