A simple SASS mixin for sprites.

_simple_sprite.scss

// text-hiding for hipsters, http://www.zeldman.com/2012/03/01/replacing-the-9999px-hack-new-image-replacement/
.hide-text{
	overflow: hidden;
	text-indent: 100%;
	white-space: nowrap;
}

/*
  A simple sprite mixin
  Pass it the path to the sprite file and the left and top co-ords of the frame/icon
  NOTE: it does the conversion to -ve lengths itself, so pass it the  +ve co-ordinates of the frame in the file, not the corrected bg-position
*/
@mixin sprite ( $imgPath, $x, $y ) {
	@extend .hide-text;
	background-image: url($imgPath);
	background-repeat: no-repeat;
	background-position: -#{$x} -#{$y};
}

Updated this (a few times, actually), to use a selector and @extend, where before it had used two @mixin and @include. Inspired by this tip: https://coderwall.com/p/7p7w2a.

I might change this back. .hide-text isn't a class-name I'd want to see in my mark-up, because it's "presentational", in the same way that .red is.