simple less mixin

style.less

@highdpi: ~"((-webkit-min-device-pixel-ratio: 1.5), (min--moz-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3/2), (min-resolution: 1.5dppx))";
.double_background(@url){
  background: ~"@{url}";
  @media @highdpi {
    background: ~`@{url}.replace(/images\//g, 'images/2x/')`;
  }
}

#your_element{
  .double_background('#f3dbab url(images/icon-cart.png)');
  background-repeat: no-repeat;
  background-size: 12px 10px;
  background-position: right;
  background-origin: padding-box;
}


/*** it outputs the below CSS: ***/


#your_element {
  background: #f3dbab url(images/icon-cart.png);
  background-repeat: no-repeat;
  background-size: 12px 10px;
  background-position: right;
  background-origin: padding-box;
}

@media ((-webkit-min-device-pixel-ratio: 1.5), (min--moz-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3/2), (min-resolution: 1.5dppx)) {
  #your_element {
    background: #f3dbab url(images/2x/icon-cart.png);
  }
}