LESS retina image mixin

image-2x.less

// Retina img
// EXAMPLE: .image-2x('../img/icon_phone.png');
.image-2x(@image, @repeat: no-repeat) {
	@width: image-width(@image);
	@height: image-height(@image);
	@filename  : ~`/(.*)\.(jpg|jpeg|png|gif)/.exec(@{image})[1]`;
	@extension : ~`/(.*)\.(jpg|jpeg|png|gif)/.exec(@{image})[2]`;
	background-image: ~`"url(@{filename}.@{extension})"`;
	background-repeat: @repeat;
	width: @width;
	height: @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) {
		/* on retina, use image that's scaled by 2 */
		background-image: ~`"url(@{filename}@2x.@{extension})"`;
		background-size: @width @height;
	}
}