flexImage-mixin.scss

// Remove units and return val
// http://stackoverflow.com/questions/10756928/getting-only-x-or-y-position-from-sprite-in-compass
@function strip-units($number) {
  @return $number / ($number * 0 + 1);
}

@mixin flexImage( $containerWidth, $elemWidth, $elemHeight, $fileName, $fullSpriteName  ) {
	$spriteWidth: strip-units( image-width(sprite-path($fullSpriteName)) );
	$spriteHeight: strip-units( image-height(sprite-path($fullSpriteName)) );
	$offsetX: abs( strip-units( nth(sprite-position($fullSpriteName, $fileName), 1) ) );
	$offsetY: abs( strip-units( nth(sprite-position($fullSpriteName, $fileName), 2) ) );
	$bgWidth: percentage( $spriteWidth / $elemWidth );
	$bgHeight: percentage( $spriteHeight / $elemHeight );
	$bgOffsetX: null;
	$bgOffsetY: null;

	@if $offsetX == 0 {
		$bgOffsetX: 0;
	} @else {
		$bgOffsetX: percentage( $offsetX / ( $spriteWidth - $elemWidth ) );
	}
	
	@if $offsetY == 0 {
		$bgOffsetY: 0;
	} @else {
		$bgOffsetY: percentage( $offsetY / ( $spriteHeight - $elemHeight ) );
	}

	width: percentage( $elemWidth / $containerWidth );
	padding-top: percentage( $elemHeight / $containerWidth );
	background-size: $bgWidth $bgHeight;
	background-position: $bgOffsetX $bgOffsetY;
}