A little bit of Sass which generates the CSS for a sprite of social media icons.

_social-icons.sass

/**
* =social
* @section Social Icons
* --------------------------------------------------------------------------------------------------
*/
.social-icons {
	@include clearfix;
	@include position(relative, 0 0 0 0);
	
	li {
		display: inline-block;
		
		a {
			@extend %replace;
			width: 22px; height: 22px;
			background-image: url(img/social-icons.png);
		}
		
		$social_count: 0;
		$social_offset: 30px;
		@each $social_icon in facebook, linkedin, twitter, vimeo, youtube, email {
			&.#{$social_icon} a {
				background-position: -$social_count * $social_offset 0 * $social_offset;

				&:hover,
				&:focus {
					background-position: -$social_count * $social_offset  -1 * $social_offset;
				}
				&:active {
					background-position: -$social_count * $social_offset  -2 * $social_offset;
				}
			}
			$social_count: $social_count + 1;
		}
	}
	
} // end of .social-icons