SASS sprite

style.css

/* this is the first sprite, when I'll add more, they will be
all listed here */
.social-nav a {
  background-color: transparent;
  border: 0;
  display: block;
  overflow: hidden;
  *text-indent: -9999px;
}
.social-nav a:before {
  content: "";
  display: block;
  height: 100%;
  width: 0;
}


.social-nav a { background-image: url("../../images/main/sprite.png"); background-repeat: no-repeat; height: 35px; width: 35px; }

.sn-twitter { background-position: -2px -2px; }

.sn-facebook { background-position: -39px -2px; }

.sn-flickr { background-position: -76px -2px; }

.sn-rss { background-position: -113px -2px; }

.sn-mail { background-position: -150px -2px; }

style.scss

%ir {
	background-color: transparent;
	border: 0;
	display: block;
	overflow: hidden;
	*text-indent: -9999px;

	&:before {
		content: "";
		display: block;
		height: 100%;
		width: 0;
	}
}


$x: -2px;
$y: -2px;
$w: 35px;
$g: 2px;
.social-nav a {
	@extend %ir;

	background-image: url("../../images/main/sprite.png");
	background-repeat: no-repeat;
	height: 35px;
	width: $w;
}
@each $sn in "twitter", "facebook", "flickr", "rss", "mail" {
	.sn-#{$sn} {
		background-position: $x $y;
		$x: $x - $w -$g;
	}
}