Get retina mac/iPhone/iPad show the @2x image, with minimum hassle.

SASS: 2x images for Retina or high DPI screens.scss

@mixin high_pixel_ratio {
	@media screen and
		(-webkit-min-device-pixel-ratio: 2),
		(min--moz-device-pixel-ratio: 2),
		(min-resolution: 2dppx),
		(min-resolution: 192dpi) {
		@content;
	}
}

@mixin retina_background_image($file, $type: 'png') {
	$image: $file + '.' + $type;
	$w: image-width($image);
	$h: image-height($image);

	background:image-url($image) no-repeat;

	@include high_pixel_ratio {
		$retina_image: $file + '@2x.' + $type;

		background:image-url($retina_image) no-repeat;
		background-size:$w $h;
	}

	width:$w; height:$h;
	display:inline-block;
}


.logo {
	@include retina_background_image('logo');
}