css sprites with sass

HTML

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

SCSS

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("http://cdn2012.joannaong.ca/wp-content/uploads/web/sass-css-sprites/humans.jpg") no-repeat $i 0; 
    cursor: pointer;
    &:hover {
      background: url("http://cdn2012.joannaong.ca/wp-content/uploads/web/sass-css-sprites/humans.jpg") no-repeat $i -150px;
    }
  }
  $i: $i - 150px;
}