css sprites with sass

This is what the css sprite looks like. Nothing new. Each human icon is 150px by 150px.

HTML

<ul>
  <li class="afroGirl"></li>
  <li class="sikh"></li>
  <li class="ninja"></li>
  <li class="afroGuy"></li>
</ul>​

SASS
Here's where the magic happens. We just subtract 150px on each item inside the loop to adjust the Y coordinate.

li { list-style: none; height: 150px; width: 150px; display: inline-block; }

/* icon sprite */
$humans: afroGirl, sikh, ninja, afroGuy;
$i: 0;
@each $human in $humans {
  .#{$human} {
    background: url("humans.jpg") no-repeat $i 0; 
    cursor: pointer;
    &:hover {
      background: url("humans.jpg") no-repeat $i -150px;
    }
  }
  $i: $i - 150px;
}​

CSS Equivalent - if anyone's interested!

li { list-style: none; height: 150px; width: 150px; display: inline-block; }
/* icon sprite */
.afroGirl {
  background: url("humans.jpg") no-repeat 0 0;
  cursor: pointer; }
.afroGirl:hover {
  background: url("humans.jpg") no-repeat 0 -150px; }
.sikh {
  background: url("humans.jpg") no-repeat -150px 0;
  cursor: pointer; }
.sikh:hover {
  background: url("humans.jpg") no-repeat -150px -150px; }
.ninja {
  background: url("humans.jpg") no-repeat -300px 0;
  cursor: pointer; }
.ninja:hover {
  background: url("humans.jpg") no-repeat -300px -150px; }
.afroGuy {
  background: url("humans.jpg") no-repeat -450px 0;
  cursor: pointer; }
.afroGuy:hover {
  background: url("humans.jpg") no-repeat -450px -150px; }

DEMO
http://jsfiddle.net/leethelobster/VyH3h/