An example of using the sprite helper in Compass

social-signin.css

li.twitter-signin {
  margin-right: 10px;
}
li.facebook-signin a, li.twitter-signin a {
  background: url('/images/btn/social-signin-sprite.png?1292353729') no-repeat;
  width: 150px;
  height: 22px;
  overflow: hidden;
  text-indent: -99999px;
  width: 150px;
}
li.facebook-signin a {
  background-position: 0px 0px;
}
li.facebook-signin a:hover {
  background-position: 0px -22px;
}
li.facebook-signin a:active, li.facebook-signin a:focus {
  background-position: 0px -44px;
}
li.twitter-signin a {
  background-position: 0px -66px;
}
li.twitter-signin a:hover {
  background-position: 0px -88px;
}
li.twitter-signin a:active, li.twitter-signin a:focus {
  background-position: 0px -110px;
}

social-signin.sass

li
  &.facebook-signin, &.twitter-signin
    margin-right: 10px
    a
      +sprite-background("btn/social-signin-sprite.png", 150px, 22px)
      text-indent: -99999px
      width: 150px
  &.facebook-signin a
    +sprite-row(1, 22px)
    &:hover
      +sprite-row(2, 22px)
    &:active, &:focus
      +sprite-row(3, 22px)
  &.twitter-signin a
    +sprite-row(4, 22px)
    &:hover
      +sprite-row(5, 22px)
    &:active, &:focus
      +sprite-row(6, 22px)