cleaning up comments

library/scss/_mixins.scss

@@ -1,10 +1,10 @@
 /******************************************************************
-Site Name: 
-Author: 
+Site Name:
+Author:
 
 Stylesheet: Mixins & Constants Stylesheet
 
-This is where you can take advantage of Sass' great features: 
+This is where you can take advantage of Sass' great features:
 Mixins & Constants. I won't go in-depth on how they work exactly,
 there are a few articles below that will help do that. What I will
 tell you is that this will help speed up simple changes like
@@ -12,7 +12,7 @@ changing a color or adding CSS3 techniques like box shadow and
 border-radius.
 
 A WORD OF WARNING: It's very easy to overdo it here. Be careful and
-remember less is more. 
+remember less is more.
 
 ******************************************************************/
 
@@ -20,8 +20,8 @@ remember less is more.
 CLEARFIXIN'
 *********************/
 
-/* Contain floats: nicolasgallagher.com/micro-clearfix-hack/ */ 
-.clearfix { 
+/* Contain floats: nicolasgallagher.com/micro-clearfix-hack/ */
+.clearfix {
 	&:before,
 	&:after {
 		content: "";
@@ -30,7 +30,7 @@ CLEARFIXIN'
 	&:after {
 		clear: both;
 	}
-	zoom: 1; 
+	zoom: 1;
 }
 
 /*********************
@@ -60,17 +60,20 @@ $white:             #fff;
 
 $bones-pink:        #f01d4f;
 $bones-blue:        #1990db;
-	
+
+$link-color:        $bones-pink;
+$link-hover:        lighten($bones-pink, 9%);
+
 /*********************
 TYPOGRAPHY
 *********************/
 
-$sans-serif:        "Helvetica Neue", Helvetica, Arial, sans-serif; 
-$serif:             "Georgia", Cambria, Times New Roman, Times, serif; 
+$sans-serif:        "Helvetica Neue", Helvetica, Arial, sans-serif;
+$serif:             "Georgia", Cambria, Times New Roman, Times, serif;
 
 
 /* 	To embed your own fonts, use this syntax
-	and place your fonts inside the 
+	and place your fonts inside the
 	library/fonts folder. For more information
 	on embedding fonts, go to:
 	http://www.fontsquirrel.com/
@@ -89,8 +92,8 @@ $serif:             "Georgia", Cambria, Times New Roman, Times, serif;
 	}
 */
 
-/* 
-use the best ampersand 
+/*
+use the best ampersand
 http://simplebits.com/notebook/2008/08/14/ampersands-2/
 */
 span.amp {
@@ -105,41 +108,45 @@ span.amp {
 
 
 /* alerts & notices */
-.alert { 
-	margin: 10px; 
-	padding: 5px 18px; 
-	border: 1px solid; 
+%alert {
+	margin: 10px;
+	padding: 5px 18px;
+	border: 1px solid;
 }
 
-.help { 
-	border-color: darken($alert-yellow, 5%); 
-	background: $alert-yellow; 
+.alert-help {
+	@extend %alert;
+	border-color: darken($alert-yellow, 5%);
+	background: $alert-yellow;
 }
 
-.info { 
-	border-color: darken($alert-blue, 5%); 
-	background: $alert-blue; 
+.alert-info {
+	@extend %alert;
+	border-color: darken($alert-blue, 5%);
+	background: $alert-blue;
 }
 
-.error { 
-	border-color: darken($alert-red, 5%); 
-	background: $alert-red; 
+.alert-error {
+	@extend %alert;
+	border-color: darken($alert-red, 5%);
+	background: $alert-red;
 }
 
-.success { 
-	border-color: darken($alert-green, 5%); 
-	background: $alert-green; 
-} 
+.alert-success {
+	@extend %alert;
+	border-color: darken($alert-green, 5%);
+	background: $alert-green;
+}
 
 /*********************
 BORDER RADIUS
 *********************/
 
-/* 
-NOTE: For older browser support (and some mobile), 
-don't use the shorthand to define *different* corners. 
+/*
+NOTE: For older browser support (and some mobile),
+don't use the shorthand to define *different* corners.
 
-USAGE: @include rounded(4px); 
+USAGE: @include rounded(4px);
 
 */
 @mixin rounded($radius: 4px) {
@@ -148,7 +155,7 @@ USAGE: @include rounded(4px);
 	border-radius:         $radius;
 }
 
-/* 
+/*
 Instead of having a seperate mixin for the different
 borders, we're using the mixin from 320 & Up to make
 things easier to use.
@@ -171,7 +178,7 @@ USAGE: @include border-radius(4px,4px,0,0);
 	border-top-left-radius:             $topleft;
 	-webkit-background-clip:            padding-box;
 	-moz-background-clip:               padding;
-	background-clip:                    padding-box; 
+	background-clip:                    padding-box;
 }
 
 
@@ -207,8 +214,8 @@ BOX SHADOWS
 
 /*********************
 CSS3 GRADIENTS
-Be careful with these since they can 
-really slow down your CSS. Don't overdo it.
+Be careful with these since they can
+really slow down your CSS. Don't overdue it.
 *********************/
 
 /* @include css-gradient(#dfdfdf,#f8f8f8); */
@@ -226,7 +233,7 @@ BOX SIZING
 *********************/
 
 /* @include box-sizing(border-box); */
-/* NOTE: value of "padding-box" is only supported in Gecko. So 
+/* NOTE: value of "padding-box" is only supported in Gecko. So
 probably best not to use it. I mean, were you going to anyway? */
 @mixin box-sizing($type: border-box) {
 	-webkit-box-sizing: $type;
@@ -235,16 +242,16 @@ probably best not to use it. I mean, were you going to anyway? */
 	box-sizing:         $type;
 }
 
- 
+
 /*********************
 BUTTONS
 *********************/
 
 .button, .button:visited {
 	font-family: $sans-serif;
-	border: 1px solid darken($bones-pink, 13%);
-	border-top-color: darken($bones-pink, 7%);
-	border-left-color: darken($bones-pink, 7%);
+	border: 1px solid darken($link-color, 13%);
+	border-top-color: darken($link-color, 7%);
+	border-left-color: darken($link-color, 7%);
 	padding: 4px 12px;
 	color: $white;
 	display: inline-block;
@@ -256,20 +263,20 @@ BUTTONS
 	margin-bottom: 20px;
 	line-height: 21px;
 	@include rounded(4px);
-	@include css-gradient($bones-pink, darken($bones-pink, 5%));
+	@include css-gradient($link-color, darken($link-color, 5%));
 
 
 	&:hover, &:focus {
 		color: $white;
-	  	border: 1px solid darken($bones-pink, 13%);
-	  	border-top-color: darken($bones-pink, 20%);
-	 	border-left-color: darken($bones-pink, 20%);
-		@include css-gradient(darken($bones-pink, 5%), darken($bones-pink, 10%));
+	  	border: 1px solid darken($link-color, 13%);
+	  	border-top-color: darken($link-color, 20%);
+	 	border-left-color: darken($link-color, 20%);
+		@include css-gradient(darken($link-color, 5%), darken($link-color, 10%));
 	}
-	
+
 	&:active {
-		@include css-gradient(darken($bones-pink, 5%), $bones-pink);
-	}	
+		@include css-gradient(darken($link-color, 5%), $link-color);
+	}
 }
 
 .blue-button, .blue-button:visited {
@@ -286,4 +293,4 @@ BUTTONS
 	&:active {
 		@include css-gradient( darken($bones-blue, 5%), $bones-blue );
 	}
-}
+}