A simple way to include both low-res and hi-res graphics for iOS/Desktop/etc.

Hi-res Graphic Mixin

@mixin hires-graphic($file, $type, $width, $height) {
	$file_name: $file + '.' + $type;
	$retina_name: $file + '_2x.' + $type;
	
	@media (-webkit-min-device-pixel-ratio: 2) {
		& {
			background-image: url('../images/' + $retina_name);
			-webkit-background-size: $width $height;
		}
	}
}

/*

Example Use:
.facebook {
	display: block;
	width: 20px;
	height: 20px;
	background-repeat: no-repeat;
	@include hires-graphic('icon_facebook', 'png', 20px, 20px);
}

*/

I love how simple this can be. Why don't you turn this into a full on repo and I'll help you with it like I'm helping bitmanic with rem?

I really want to work on this. Please turn this into a full on repo and add me as collaborator :) I'd do it, but then the project would be under my namespace vs yours.