Compass Custom Sprites Definitions

manual_sprites.scss

@import 'compass/utilities/sprites/base';

$sprite-spacing: 1px;
$social_sprite: sprite-map('social-sprite/*.png', $spacing: $sprite-spacing);

@mixin sprite-dimensions($sprite, $image_name) {
  height: image-height( sprite-file($sprite, $image_name) );
  width: image-width( sprite-file($sprite, $image_name) );
}

@mixin quick-sprite($map, $image_name) {
  background: sprite($map, $image_name);
  @include sprite-dimensions($map, $image_name);
}

@mixin btn_sprite($btn) {
  text-indent: -999em;
  @include quick-sprite($social_sprite, 'btn-' + $btn);

  &:hover { @include quick-sprite($social_sprite, 'btn-' + $btn + '-hover'); }
}

#blog     a { @include btn_sprite('blog'); }
#facebook a { @include btn_sprite('facebook'); }
#twitter  a { @include btn_sprite('twitter'); }
#github   a { @include btn_sprite('github'); }