more sassification to stylesheet

Author: Troy Giunipero

css/style.scss

@@ -1,39 +1,61 @@
+// color vars
+$charcoal: #6c6c6c;
+$olive: #b8b690;
+$orange: #d97036;
+$beige: #e2ddb7;
+$creme: #fcfbf7;
+$near-black: #191919;
+
+$bkgd-img: '../resources/img/grit.png';
+
+// mixins
+@mixin font-face($font-name) {
+  @font-face {
+    font-family: $font-name;
+    src: local($font-name), url('../resources/font/' + $font-name + '.ttf');
+  }
+}
+
+@mixin bkgd-transition($duration: 0.5s, $easing: ease) {
+  -moz-transition: background $duration $easing;
+  -webkit-transition: background $duration $easing;
+}
+
+// Styles for canvas
 html {
   height: 100%;
-  background: #f1eedc url('../resources/img/grit.png') repeat;
-  -moz-transition: background 0.5s ease;
-  -webkit-transition: background 0.5s ease;
+  background: #f1eedc url($bkgd-img) repeat;
+  @include bkgd-transition;
 
   &#day {
-    body { background-color: #fcfbf7; }
-    #optionTab { background: #f1eedc url('../resources/img/grit.png') repeat right; }
+    body { background-color: $creme; }
+    #optionTab { background: #f1eedc url($bkgd-img) repeat right; }
     hr { background-color: #cfccab; }
-    div#controls span, div#optionTabText { color: #6c6c6c; }
+    div#controls span, div#optionTabText { color: $charcoal; }
   }
 
   &#night {
-    background: #434237 url('../resources/img/grit.png') repeat;
-    body { background-color: #191919; }
-    #optionTab { background: #434237 url('../resources/img/grit.png') repeat right; }
+    background: #434237 url($bkgd-img) repeat;
+    body { background-color: $near-black; }
+    #optionTab { background: #434237 url($bkgd-img) repeat right; }
     hr { background-color: #7c7961; }
     div#controls span, div#optionTabText { color: #aaa; }
   }
 }
 
 body {
-  font-family: 'Raleway';
+  font-family: 'Raleway-Light';
   border-radius: 10px;
-  background: #fcfbf7;
+  background: $creme;
   position: fixed;
   top: 10px;
   left: 10px;
   right: 10px;
   bottom: 10px;
-  color: #6c6c6c;
+  color: $charcoal;
   -moz-user-select: none;
   -webkit-user-select: none;
-  -moz-transition: background 0.5s ease;
-  -webkit-transition: background 0.5s ease;
+  @include bkgd-transition;
 }
 
 h1 {
@@ -42,11 +64,11 @@ h1 {
   text-shadow: 2px 2px 5px #555555;
   font-size: 75px;
   font-weight: normal;
-  font-family: 'Dancing Script';
+  font-family: 'Dancing-Script';
 }
 
 
-/**  Styles for blocks and time digits  **/
+// Styles for blocks and time digits
 div#clockWidget, div#timeDisplay {
   top: 50%;
   left: 50%;
@@ -63,7 +85,7 @@ div#clockWidget {
 div#timeDisplay {
   display: none;
   letter-spacing: 2px;
-  font-family: 'Raleway Thin';
+  font-family: 'Raleway-Thin';
 
   &.horizontal {
     width: 150px;
@@ -109,40 +131,39 @@ div.block {
   display: inline-block;
   line-height: 27px;
   font-size: 18px;
-  -moz-transition:background 0.2s ease-in;
-  -webkit-transition:background 0.2s ease-in;
+  @include bkgd-transition(0.2s, ease-in);
 
   &.row2 {
     border: 3px solid #a0a078;
-    background: #b8b690 url('../resources/img/grit.png') repeat;
+    background: $olive url($bkgd-img) repeat;
 
-    &.dark { background: #b8b690 url('../resources/img/grit.png') repeat; }
-    &.light { background: rgba(244, 243, 235, 0.1) url('../resources/img/grit.png') repeat; }
+    &.dark { background: $olive url($bkgd-img) repeat; }
+    &.light { background: rgba(244, 243, 235, 0.1) url($bkgd-img) repeat; }
   }
 
   &.row1 {
     border: 3px solid #c85b2c;
-    background: #d97036 url('../resources/img/grit.png') repeat;
+    background: $orange url($bkgd-img) repeat;
 
-    &.dark { background: #d97036 url('../resources/img/grit.png') repeat; }
-    &.light { background: rgba(248, 236, 226, 0.1) url('../resources/img/grit.png') repeat; }
+    &.dark { background: $orange url($bkgd-img) repeat; }
+    &.light { background: rgba(248, 236, 226, 0.1) url($bkgd-img) repeat; }
   }
 
   &.row0 {
     border: 3px solid #c3c19b;
-    background: #e2ddb7 url('../resources/img/grit.png') repeat;
+    background: $beige url($bkgd-img) repeat;
 
-    &.dark { background: #e2ddb7 url('../resources/img/grit.png') repeat; }
-    &.light { background: rgba(248, 247, 239, 0.1) url('../resources/img/grit.png') repeat; }
+    &.dark { background: $beige url($bkgd-img) repeat; }
+    &.light { background: rgba(248, 247, 239, 0.1) url($bkgd-img) repeat; }
   }
 
   > span { color: #444; }
 }
 
 
-/**  Styles for options  **/
+// Styles for options
 div#optionTab {
-  background: #f1eedc url('../resources/img/grit.png') repeat right;
+  background: #f1eedc url($bkgd-img) repeat right;
   letter-spacing: 2px;
   top: 50%;
   left: 100%;
@@ -154,10 +175,9 @@ div#optionTab {
   height: 94px;
   width: 44px;
   cursor: default;
-  -moz-transition: background 0.5s ease;
-  -webkit-transition: background 0.5s ease;
-  -webkit-backface-visibility: hidden;  /* eliminates trailing border lines during animation */
-}                                       /* http://stackoverflow.com/questions/12273528/trailing-border-lines-in-chrome */
+  @include bkgd-transition;
+  -webkit-backface-visibility: hidden;  // eliminates trailing border lines during animation
+}                                       // http://stackoverflow.com/questions/12273528/trailing-border-lines-in-chrome
 
 div#optionTabText {
   margin-top: 46px;
@@ -230,16 +250,15 @@ div#layout {
 }
 
 
-/** Styles for option panel buttons **/
+// Styles for option panel buttons
 button {
-  color: #6c6c6c;
+  color: $charcoal;
   font-size: .9em;
-  font-family: 'Raleway';
+  font-family: 'Raleway-Light';
   letter-spacing: 1px;
   margin: 4px 0;
   cursor: pointer;
-  -moz-transition: background 0.4s ease;
-  -webkit-transition: background 0.4s ease;
+  @include bkgd-transition(0.4s);
   border: 1px solid #cfccab; 
   background-color: #f3f1e4;
   border-radius: 6px;
@@ -258,7 +277,7 @@ button {
     opacity: 0.6;
 
     &:hover, &:focus, &:active {
-      color: #6C6C6C;
+      color: $charcoal;
       background-color: #f3f1e4;
     }
   }
@@ -272,19 +291,7 @@ button {
   &#sun, &#horizontal { display: none; }
 }
 
-
-/**  Import fonts  **/
-@font-face {
-  font-family: 'Raleway Thin';
-  src: local('Raleway-Thin'), url('../resources/font/Raleway-Thin.ttf');
-}
-
-@font-face {
-  font-family: 'Raleway';
-  src: local('Raleway-Light'), url('../resources/font/Raleway-Light.ttf');
-}
-
-@font-face {
-  font-family: 'Dancing Script';
-  src: local('Dancing-Script'), url('../resources/font/Dancing-Script.ttf');
-}
+// Import fonts
+@include font-face('Raleway-Thin');
+@include font-face('Raleway-Light');
+@include font-face('Dancing-Script');