Improved retina.less for compiling retina backgrounds with an existing media query.

retina.less

// retina.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)";

.retinaBg(@path, @w: auto, @h: auto, @prefix: _) {
	background-image: url(@path);
	@at2x_path: ~`@{path}.replace(/\.\w+$/, function(match) { return "@2x" + match; })`;

	@final_media: ~`"@{highdpi}".replace(/(\#)/g, function(match) { return ("@{prefix}".length > 1 ? " @{prefix} and " + match : ""); }).replace(/\#/g, '')`;

	@media @final_media {
		background-image: url("@{at2x_path}");
		background-size: @w @h;
	}
}

/*

Usage:

.retinaBg('../images/footer/small_facebook.png', 22px, 19px, ~"(max-width: 700px)");

*/