_image.scss

// This mixin require Modernizr
@mixin background-image($name, $size: false){
	background-image: url(#{$image-path}/#{$name}.svg);
	@if($size){
		background-size: $size;
	}
	.no-svg &{
		background-image: url(#{$image-path}/#{$name}.#{$image-fallback-extension});

		@media only screen and (-moz-min-device-pixel-ratio: 1.5), only screen and (-o-min-device-pixel-ratio: 3/2), only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-device-pixel-ratio: 1.5) {
			background-image: url(#{$image-path}/#{$name}#{$image-retina-suffix}.#{$image-fallback-extension});
		}
	}
}

@mixin image-2x($name, $image-size: $sprite-size) {
	@media (-moz-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3/2), (-webkit-min-device-pixel-ratio: 1.5), (min-device-pixel-ratio: 1.5), (min-resolution: 1.5dppx) {
		background-image: url(#{$image-path}/#{$name}#{$image-retina-suffix}.#{$image-fallback-extension});
		@include bg-size($image-size);
	}
}

@mixin sprite($width, $height, $bg-extras) {
	width: $width;
	height: $height;
	background: url(#{$image-path}/#{$sprite}) no-repeat $bg-extras;
}

@mixin spritesmith($sprite) {
	@include spritesmith-image($sprite);
	@include spritesmith-position($sprite);
	@include spritesmith-width($sprite);
	@include spritesmith-height($sprite);
}

@mixin spritesmith-width($sprite) {
	width: nth($sprite, 5);
}

@mixin spritesmith-height($sprite) {
	height: nth($sprite, 6);
}

@mixin spritesmith-position($sprite) {
	$sprite-offset-x: nth($sprite, 3);
	$sprite-offset-y: nth($sprite, 4);
	background-position: $sprite-offset-x  $sprite-offset-y;
}

@mixin spritesmith-image($sprite) {
	$sprite-image: nth($sprite, 9);
	background-image: url(#{$sprite-image});
}