have logo-style use class definitions, then @extend them, instead of @include, it results in smaller CSS.

2 files changed, 12 insertions, 10 deletions

diff --git a/logo-style.scss.php b/logo-style.scss.php
index 1c9c062..7c3f6da 100644
--- a/logo-style.scss.php
+++ b/logo-style.scss.php
@@ -14,7 +14,7 @@ $white = css_shadow::draw_border(array('left' =>.04, 'top'   =>.04,
                                        'steps'=>10,
                                        'color'=>'#FFFFFF'));
 ?>
-@import 'http://fonts.googleapis.com/css?family=Anton';
+@import url('http://fonts.googleapis.com/css?family=Anton');
 
 @mixin transform($arg) {
 	        transform: $arg;
@@ -25,7 +25,10 @@ $white = css_shadow::draw_border(array('left' =>.04, 'top'   =>.04,
 	     -o-transform: $arg;
 }
 
-@mixin logo {
+// We define these as classes, not mixins because @extend'ing them will result in
+// smaller CSS than @include'ing them.
+
+.logo {
 	font-family: Anton, sans-serif;
 	font-style: oblique;
 	font-variant: small-caps;
@@ -38,12 +41,11 @@ $white = css_shadow::draw_border(array('left' =>.04, 'top'   =>.04,
 	text-transform: uppercase;
 	line-height: 1em;
 }
-@mixin logo-white {
-	@include logo;
+.logo-white {
+	@extend .logo;
 	text-shadow: <?php echo "\n$blue$white"; ?>	0 0 #000000;
 }
-
-@mixin logo-nowhite {
-	@include logo;
+.logo-nowhite {
+	@extend .logo;
 	text-shadow: <?php echo "\n$blue"; ?>	0 0 #000000;
 }
diff --git a/style.scss b/style.scss
index 9fabbf6..1cbb5b8 100644
--- a/style.scss
+++ b/style.scss
@@ -63,20 +63,20 @@ body {
 					color: inherit;
 				}
 				#team-name {
+					@extend .logo-nowhite;
 					font-size: 80px;
-					@include logo-nowhite;
 				}
 				h2 {
+					@extend .logo-nowhite;
 					font-size: 40px;
-					@include logo-nowhite;
 				}
 				#team-number {
+					@extend .logo-white;
 					position: absolute;
 					bottom: 0.2em;
 					right: 0.4em;
 					font-size: 130px;
 					line-height: 1em;
-					@include logo-white;
 				}
 			}
 		}