Makes 'a.<service name>' classes from predefined variables. This class adds a 1px border (with the colour matching the service) below the element, and also changes the text colour and makes the border transparent on hover.Note: This code is based on a example I am unable to locate.

Branded classes.scss

//Base colour. Used when hovering a link.

$base: #242322;


//Colours variables (from brandcolors.net)

$facebook: #3b5998;
$twitter: #00acee;
$linkedin: #0e76a8;
$instagram: #3f729b;
$dribbble: #ea4c89;
$github: #171515;

$class_names: facebook, twitter, linkedin, instagram, dribbble, github;
$social_colours: $facebook, $twitter, $linkedin, $instagram, $dribbble, $github;


@for $i from 1 through length($class_names) {

$this-colour: nth($social_colours, $i); 

	a.#{nth($class_names, $i)} {
		border-bottom: 1px solid $this-colour;
		color: $base;
		text-decoration: none;

		&:hover {
		  border-bottom: 1px solid transparent;
		  color: $this-colour;
		  text-decoration: inherit;
		}
	}
}