A Sass/Compass mixin I built for The Black Brick Road's latest installment.

gistfile1.txt

// All the little mixins that will go into one BIG mixin. 
// Hey, might need them!

@mixin set-dimensions($width, $height, $parent-width) {
	@include background-size(100% auto);
	width: percentage($width/$parent-width);
	padding-top: percentage($height/$parent-width);
	height: 0;
}

@mixin set-width($width, $parent-width) {
	@include background-size(100% auto);
	width: percentage($width/$parent-width);
}

@mixin set-position($sX, $sY, $parent-width, $parent-height) {
	left: percentage($sX/$parent-width);
	top: percentage($sY/$parent-height);
}

@mixin set-bg-width($sprites-width, $sprite, $sprite-image) {
	$spriteX: percentage($sprites-width / image-width(sprite-file($sprite, $sprite-image)));
	@include background-size($spriteX auto);
}

// The BIG mixin that generates styles for both the droppable "dirty" item
// and the "clean" place where it belongs
@mixin create-item($item, $sX, $sY, $placeX, $placeY, $parent-width: $house-width, $parent-height: $frame-height) {

	// Check for existence of ITEM-place sprite. Make .ITEM-place bg rules in that event.
	.#{$item} {
		$iWidth: image-width(sprite-file($items-sprite, #{$item}-dirty));
		$iHeight: image-height(sprite-file($items-sprite, #{$item}-dirty));
	  @include set-dimensions($iWidth, $iHeight, $parent-width);
	  @include set-position($sX, $sY, $parent-width, $parent-height);
	  @include set-bg-width($items-sprite-width, $items-sprite, #{$item}-dirty);
	  @extend %items;
	}

	.#{$item}-place {
		// If there's a background image for this already...
		@if index(sprite-names($items-sprite), #{$item}-place) {
			@include items-sprite(#{$item}-place);
		}
		$iWidth: image-width(sprite-file($items-sprite, #{$item}-place));
		$iHeight: image-height(sprite-file($items-sprite, #{$item}-place));
	  @include set-dimensions($iWidth, $iHeight, $parent-width);
	  @include set-position($placeX, $placeY, $parent-width, $parent-height);
	  @include set-bg-width($items-sprite-width, $items-sprite, #{$item}-place);
	  @extend %place;
	}

	.#{$item}-place.droppable {
	  @include items-sprite(#{$item}-hover);
	}

	.#{$item}-place.clean {
	  @include items-sprite(#{$item}-clean);
	}

}

// Call it like so:
@include create-item(socks, 575px, 186px, 686px, 141px);

Here's what it spits out:

  .socks {
    -webkit-background-size: 100% auto;
    -moz-background-size: 100% auto;
    -o-background-size: 100% auto;
    background-size: 100% auto;
    width: 4.11862%;
    padding-top: 4.94234%;
    height: 0;
    left: 47.36409%;
    top: 18.6%;
    -webkit-background-size: 506.0% auto;
    -moz-background-size: 506.0% auto;
    -o-background-size: 506.0% auto;
    background-size: 506.0% auto;
  }

  .socks-place {
    background-position: 0 92.82165%;
    -webkit-background-size: 100% auto;
    -moz-background-size: 100% auto;
    -o-background-size: 100% auto;
    background-size: 100% auto;
    width: 11.69687%;
    padding-top: 9.2257%;
    height: 0;
    left: 56.50741%;
    top: 14.1%;
    -webkit-background-size: 178.16901% auto;
    -moz-background-size: 178.16901% auto;
    -o-background-size: 178.16901% auto;
    background-size: 178.16901% auto;
  }

  .socks-place.droppable {
    background-position: 0 91.27554%;
  }

  .socks-place.clean {
    background-position: 0 88.90116%;
  }