Sass 3.3+ optimization & var library

create new variable library file to consolidate all colors in min into one easily updatable file.

apply var colors to the framework files.

Optimized some of the code to use new Sass 3.3+ features, making for some DRYer dev files. (same CSS output as before)

sass/__var-lib.scss

@@ -0,0 +1,45 @@
+//-------------------------------------------------------------------
+// Variable Library
+//
+// The purpose of the variable library is to have a centralized
+// location for various reusable values for the Min Framework.
+//
+// Instead of hunting through the different Sass files to update
+// values, simply change the variable in question to update all
+// instances of that value.
+//
+//-------------------------------------------------------------------
+
+
+// Dark Colors
+$c-black:         #000;
+$c-off-black:     #999;
+$c-darker:        #888;
+$c-dark:          #777;
+
+
+// Medium Colors
+$c-grey-dark:     #aaa;
+$c-grey:          #ccc;
+$c-grey-light:    #eee;
+
+// Light Colors
+$c-white:         #fff;
+
+
+// Button Colors
+$a--bg:           #0ae;
+$a--hover:        #09d;
+$a--active:       #08b;
+
+$b--bg:           #3c5;
+$b--hover:        #2b4;
+$b--active:       #2a4;
+
+$c--bg:           #d33;
+$c--hover:        #c22;
+$c--active:       #b22;
+
+
+// Inputs
+$c-focus:         #5ab;

sass/_button.scss

@@ -2,7 +2,8 @@
 // Mixin to set btn background for inactive, active & hover states
 //-------------------------------------------------------------------
 
-@mixin btn-style($bg, $bg-hover, $bg-active) {
+// set default variables to be base button colors.
+@mixin btn-style($bg: $c-off-black, $bg-hover: $c-darker, $bg-active: $c-dark) {
   background: $bg;
 
   &:hover {
@@ -25,41 +26,50 @@
 // use .btn on any element to give it the styling of a button
 .btn {
   @extend %no-underline;
-  @extend outline-0;
-  @include btn-style(#999, #888, #777);
+  @extend %outline-0;
+  @include btn-style;
   border: 0;
   border-radius: 10px; // rounded corners
-  color: #fff;
+  color: $c-white;
   cursor: pointer;
   display: inline-block; // Enables non-inline-block elements like <a>s to be buttons
   font-size: 2.5em;
   margin: .2em .3em .2em 0;
   padding: 15px 40px 16px;
-}
 
 
-// Set colors for your buttons, see the button mixin at the top of this
-// file to see how the hex colors are allocated
-.btn-a {
-  @include btn-style(#0ae, #09d, #08b);
-}
-
-.btn-b {
-  @include btn-style(#3c5, #2b4, #2a4);
-}
-
-.btn-c {
-  @include btn-style(#d33, #c22, #b22);
-}
+  // *** NOTE ***
+  // The following requires Sass 3.3+ to compile properly.
+  // As the & appends the following partial selector to the
+  // main .btn selector, and creates a new class.
+  //
+  // e.g. &-a{} will compile to .btn-a{}
 
 
-// Add this class to a <button> or element with a .btn class
-// to create a smaller sized button.
-.btn-sm {
-  border-radius: 4px; /* rounded corners */
-  font-size: .9em;
-  padding: 10px 15px 11px;
-}
+  // Set colors for your buttons, see the button mixin at the top of this
+  // file to see how the hex colors are allocated
+  &-a {
+    @include btn-style($a--bg, $a--hover, $a--active);
+  }
+
+  &-b {
+    @include btn-style($b--bg, $b--hover, $b--active);
+  }
+
+  &-c {
+    @include btn-style($c--bg, $c--hover, $c--active);
+  }
+
+
+  // Add this class to a <button> or element with a .btn class
+  // to create a smaller sized button.
+  &-sm {
+    border-radius: 4px; /* rounded corners */
+    font-size: .9em;
+    padding: 10px 15px 11px;
+  }
+
+} // end .btn
 
 
 //-------------------------------------------------------------------

sass/_general.scss

@@ -2,7 +2,8 @@
 //  General Min Styling
 //-------------------------------------------------------------------
 
-body, textarea {
+body,
+textarea {
   font: 16px sans-serif;
   margin: 0;
 }

sass/_grid.scss

@@ -2,11 +2,6 @@
 //-------------------------------------------------------------------
 //  Grid system responsive code is in _general.scss
 //  A hack (for old IEs) for the grid system is located in _iehacks.scss
-//
-//
-//  Every column has 2% padding (1% on each side) its width is
-//  (((its number/12) * 100)-2) percent (truncated, to avoid spillage.)
-//  Thus, c12 has width 98%.
 //-------------------------------------------------------------------
 
 .row {
@@ -19,7 +14,7 @@
 }
 
 $grid-list: (
-  c1   8.33%,
+  c1    8.33%,
   c2   16.66%,
   c3   25%,
   c4   33.33%,

sass/_headings.scss

@@ -1,4 +1,4 @@
-@if $import-headings == true{
+@if $import-headings == true {
 //-------------------------------------------------------------------
 //  Headings
 //-------------------------------------------------------------------

sass/_inputs.scss

@@ -1,4 +1,4 @@
-@if $import-inputs == true{
+@if $import-inputs == true {
 //-------------------------------------------------------------------
 //  Inputs
 //-------------------------------------------------------------------
@@ -9,27 +9,27 @@
 }
 
 
-textarea, input {
+input, textarea {
   @extend %global-inputs;
-  	-webkit-appearance: none; // make iOS inputs pretty
-  border: 1px solid #ccc;
+  -webkit-appearance: none; // make iOS inputs pretty
+  border: 1px solid $c-grey;
   outline: 0;
   padding: 6px;
 
   &:focus {
-    border-color: #5ab;
+    border-color: $c-focus;
   }
 }
 
 
-textarea, input[type='text'] {
+input[type='text'], textarea {
   width: 13em;
 }
 
 
 .addon-front {
   @extend %global-inputs;
-  box-shadow: 0 0 0 1px #ccc;
+  box-shadow: 0 0 0 1px $c-grey;
   padding: 6px 11px;
 }
 

sass/_navbar.scss

@@ -5,8 +5,8 @@
 
 // CSS reused in multiple selectors
 %nav-global {
-  background: #000;
-  color: #fff;
+  background: $c-black;
+  color: $c-white;
 }
 
 
@@ -20,7 +20,7 @@
   a {
     @extend %no-underline;
     @extend %nav-global;
-    color: #aaa;
+    color: $c-grey-dark;
     font-size: 14px;
     padding-right: 1em;
     position: relative;
@@ -59,14 +59,14 @@
     // transition: max-height .5s ease-in-out, height .5s ease-in-out;
 
     &:focus {
-      // -- Necesary for animations
-      // max-height: 500px;
-      // height: 100%;
       height: auto;
+      // -- Necessary for animations
+      // height: 100%;
+      // max-height: 500px;
     }
 
     & div:before {
-      background: #000;
+      background: $c-black;
       border-top: 3px solid;
       border-bottom: 10px double;
       content: '';

sass/_table.scss

@@ -1,4 +1,4 @@
-@if $import-tables == true{
+@if $import-tables == true {
 //-------------------------------------------------------------------
 //  Tables
 //-------------------------------------------------------------------
@@ -10,7 +10,7 @@ table {
 
 
 tbody tr:nth-child(2n-1) {
-  background: #ccc; // Shade every other table row
+  background: $c-grey; // Shade every other table row
   // We use tbody to ensure that we don't shade the heading
   // this preserves the order of the shading
 }

sass/min-master.scss

@@ -2,8 +2,9 @@
 //  Core Styles of Min
 // ------------------------------------------------------------------
 
-@import 'general.scss';
+@import '__var-lib.scss';
 
+@import 'general.scss';
 
 
 // ------------------------------------------------------------------