Less mixin to pivot between two background images based on device pixel density.Please provide feedback, I'm always interested in pontificating on how to format these disgusting media queries for readability!

responsive-background.less

/* use the first form if the @2x image is the same url with "@2x" inserted before the extension */
.responsive-background(@url-1x, @background-size) {
	@url-2x: ~`@{url-1x}.replace(/(\.[a-z0-9]{2,4})$/i, '@2x$1')`;
	.responsive-background(@url-1x, @url-2x, @background-size);
}

/* use the second form to specify the url for the @2x image manually */
.responsive-background(@url-1x, @url-2x, @background-size) {
	display: inline-block;
	text-indent: -9999px;
	background: transparent url(@url-1x) no-repeat;

	@media
	only screen and (   min--moz-device-pixel-ratio:   1.5 ),
	only screen and (-webkit-min-device-pixel-ratio:   1.5 ),
	only screen and (        min-device-pixel-ratio:   1.5 ),
	only screen and (     -o-min-device-pixel-ratio: ~"3/2") {
		background-image: url(@url-2x);
		background-size: @background-size;
	}
}


/* Notes:
- @background-size should be the dimensions of the 1x image.
- the mixin refrains from setting height/width in order to support full-size images
  as well as sprites which contain many areas intended to be used independently.
- the 'text-indent' property may be omitted, especially if you use an "alt" attribute
  rather than text nodes in your markup to describe the element for accessibility . */