Cacher is the code snippet organizer for pro developers

// social network colors
$color-adjust: 		10%;
$facebook-blue: 	#3b5998;
$twitter-blue: 		#00aced;
$instagram-blue: 	#517fa4;
$youtube-red: 		#bb0000;
$pinterest-red: 	#cb2027;
$googleplus-red: 	#dd4b39;

span { display: none; }

// covers <li> and standalone <i> items
li, i {
	@include transition(color 0.2s ease-in-out);

	&[class*="facebook"] {

		&, a {
			color: $facebook-blue;

			&:hover {
				color: lighten($facebook-blue, $color-adjust);
			}
		}
	}

	&[class*="twitter"] {

		&, a {
			color: $twitter-blue;

			&:hover {
				color: lighten($twitter-blue, $color-adjust);
			}
		}
	}

	&[class*="instagram"] {

		&, a {
			color: $instagram-blue;

			&:hover {
				color: lighten($instagram-blue, $color-adjust);
			}
		}
	}

	&[class*="youtube"] {

		&, a {
			color: $youtube-red;

			&:hover {
				color: lighten($youtube-red, $color-adjust);
			}
		}
	}

	&[class*="pinterest"] {

		&, a {
			color: $pinterest-red;

			&:hover {
				color: lighten($pinterest-red, $color-adjust);
			}
		}
	}

	&[class*="google"] {

		&, a {
			color: $googleplus-red;

			&:hover {
				color: lighten($googleplus-red, $color-adjust);
			}
		}
	}
}

<!-- applies color to inline <i> elements -->
<p><i class="icon-instagram"></i> We're on Instagram!</p>

<!-- and applies to list class <a> elements -->
<ul class="social">
	<li class="facebook"><a href="#"><i class="icon-facebook"></i> <span>Facebook</span></a></li>
	<li class="twitter"><a href="#"><i class="icon-twitter"></i> <span>Twitter</span></a></li>
	<li class="instagram"><a href="#"><i class="icon-instagram"></i> <span>Instagram</span></a></li>
	<li class="youtube"><a href="#"><i class="icon-youtube"></i> <span>YouTube</span></a></li>
	<li class="pinterest"><a href="#"><i class="icon-pinterest"></i> <span>Pinterest</span></a></li>
	<li class="google"><a href="#"><i class="icon-google"></i> <span>Google+</span></a></li>
</ul>