mixin that takes advantage of @extend for modularity. src: http://blog.teamtreehouse.com/extending-placeholder-selectors-with-sass

_buttons.scss

// base button styles
%btn {
  padding: em(14) em(40);
	color: $white;
	display: inline-block;
	@include border-radius(7px);

	&:hover {
		color: $white;
	}
}

// gradient background style 
@mixin btn-theme($startColor, $stopColor) {
	@extend %btn;
	@include background-image(linear-gradient($startColor 0, $stopColor 75%));
}

// themes 
%blue {
	@include btn-theme(#00aeff, $blue);
}


// actual buttons with semantic names
.btn-primary {
	@extend %blue;
}