Social Share - Scss

gistfile1.sass

// Placehoder selector for social share icon style
%social_share_icon_style {
	width:20px;
	line-height: 35px;
	text-align:center;
	font-size:em(20);
	transition: color .5s;
	margin-left:5px;
}

// Font Awesome mixin (to prevent having to load all the CSS)
@mixin font-awesome($icon_code) {
	display: inline-block;
	font-family: FontAwesome;
	font-style: normal;
	font-weight: normal;
	line-height: inherit;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	content:"#{$icon_code}";
}

// social share icons key value pair map 
// (network name, hover colour, font awesome icon unicode value)
$social_share_icons_map:
	twitter #55acee "\f099",
	facebook #3b5998 "\f09a",
	linkedin #0976b4 "\f0e1";

// generate css to target each of the social share icons in the map
@each $kvp in $social_share_icons_map {
	
	// target a link via the social network name (1st item) 
	a.#{nth($kvp, 1)} {
		text-decoration: none;
		&:before {
			// include the font awesome icon (3rd item)
			@include font-awesome(nth($kvp, 3));
			@extend %social_share_icon_style;
		}
	}
	a:hover.#{nth($kvp, 1)} {
		text-decoration: none;
		&:before {
			// set the hover colour based (2nd item) 
			color: nth($kvp, 2);
		}
	}
}