Using Compass sprites for hover-state social icons

gistfile1.scss

// Where the social icons are in a 'social' subfolder in the images folder
// And the naming convention is footer-<servicename>.png / footer-<servicename>-active.png

@import "compass/utilities/sprites";
$social-sprite-map: sprite-map('social/*.png');

@mixin active-social($name) {
  @include sprite-replace-text-with-dimensions($social-sprite-map, footer-#{$name});
  &:hover {
    @include sprite-replace-text-with-dimensions($social-sprite-map, footer-#{$name}-active);
  }
}

.footer-twitter {
  @include active-social(twitter);
}

.footer-facebook {
  @include active-social(facebook);
}

.footer-gplus {
  @include active-social(gplus);
}