Build: Update to use grunt-jsass, fixes node 5+, refine variable usage

Fixes gh-152
Closes gh-154

Author: arschmitz

.jshintrc

@@ -4,6 +4,7 @@
 	"eqeqeq": true,
 	"eqnull": true,
 	"expr": true,
+	"esnext": true,
 	"immed": true,
 	"noarg": true,
 	"quotmark": "double",

.travis.yml

@@ -1,7 +1,7 @@
 sudo: false
 language: node_js
 node_js:
-  - "0.10"
+  - "5"
 cache:
   directories:
   - node_modules

package.json

@@ -51,12 +51,12 @@
     "grunt-csscomb": "3.0.0",
     "grunt-git-authors": "2.0.0",
     "grunt-html": "5.0.1",
+    "grunt-jsass": "1.1.0",
     "grunt-jscs": "2.3.0",
     "grunt-sass": "1.0.0",
     "grunt-selenium-server": "0.1.2",
     "grunt-svgmin": "2.0.0",
     "grunt-svgstore": "0.5.0",
-    "jsass-vars": "0.0.3",
     "load-grunt-config": "0.16.0",
     "perfjankie": "1.2.2"
   },

scss/atoms/buttons/_buttons.scss

@@ -39,49 +39,49 @@
 }
 
 .btn {
-	@include btn(	map-get($ui-btn, margin));
+	@include btn(	map-get($btn-element, margin));
 }
 
 /* Button Colors */
 
 .btn-default {
-	@include btn-colors($ui-btn-default);
+	@include btn-colors($btn-default);
 }
 
 .btn-primary {
-	@include btn-colors($ui-btn-primary);
+	@include btn-colors($btn-primary);
 }
 
 .btn-success {
-	@include btn-colors($ui-btn-success);
+	@include btn-colors($btn-success);
 }
 
 .btn-info {
-	@include btn-colors($ui-btn-info);
+	@include btn-colors($btn-info);
 }
 
 .btn-warning {
-	@include btn-colors($ui-btn-warning);
+	@include btn-colors($btn-warning);
 }
 
 .btn-danger {
-	@include btn-colors($ui-btn-danger );
+	@include btn-colors($btn-danger );
 }
 
 /* Button Sizes */
 
 .btn-lg {
-	@include btn-size($ui-btn-lg);
+	@include btn-size($btn-lg);
 }
 
 .btn-md {
-	@include btn-size($ui-btn-md);
+	@include btn-size($btn-md);
 }
 
 .btn-sm {
-	@include btn-size($ui-btn-sm);
+	@include btn-size($btn-sm);
 }
 
 .btn-xs {
-	@include btn-size($ui-btn-xs);
+	@include btn-size($btn-xs);
 }

scss/atoms/buttons/_mixins.scss

@@ -1,28 +1,28 @@
 @mixin btn($margin) {
 	border: 1px solid transparent;
 	cursor: pointer;
-	letter-spacing: map-get($ui-btn, letter-spacing);
-	font-family: $ui-btn-font;
-	font-weight: map-get($ui-btn, font-weight);
+	letter-spacing: map-get($btn-element, letter-spacing);
+	font-family: $btn-font;
+	font-weight: map-get($btn-element, font-weight);
 	margin: $margin;
 	text-decoration: none;
-	text-transform: map-get($ui-btn, text-transform);
+	text-transform: map-get($btn-element, text-transform);
 }
 
 @mixin btn-colors($btn-colors) {
 	color: map-get($btn-colors, color);
 	background: map-deep-get($btn-colors, "background", "base");
 	border-color: map-get($btn-colors, border);
 	@if (map-get($btn-colors, shadow) == true) {
-		transition: map-get($ui-btn-shadows, transition);
-		box-shadow: map-get($ui-btn-shadows, box-shadow-base);
+		transition: map-get($btn-shadows, transition);
+		box-shadow: map-get($btn-shadows, box-shadow-base);
 	}
 
 	&:active,
 	&.active {
 		@include btn-active($btn-colors);
 		@if (map-get($btn-colors, shadow) == true) {
-			box-shadow: map-get($ui-btn-shadows, box-shadow-active);
+			box-shadow: map-get($btn-shadows, box-shadow-active);
 		}
 	}
 
@@ -40,7 +40,7 @@
 	&.disabled {
 		@include btn-disabled($btn-colors);
 		@if (map-get($btn-colors, shadow) == true) {
-			box-shadow: map-get($ui-btn-shadows, box-shadow-disabled);
+			box-shadow: map-get($btn-shadows, box-shadow-disabled);
 		}
 	}
 }
@@ -71,17 +71,17 @@
 }
 
 @mixin btn-disabled($btn-colors) {
-	cursor: map-get($ui-btn-disabled, cursor);
-	color: rgba(map-get($btn-colors, color),  map-get($ui-btn-disabled, "color-opacity"));
+	cursor: map-get($btn-disable, cursor);
+	color: rgba(map-get($btn-colors, color),  map-get($btn-disable, "color-opacity"));
 	$bg: map-deep-get($btn-colors, "background", "base");
 	@if ($bg == transparent) {
 		background: map-deep-get($btn-colors, "background", "base");
 	} @else {
-		background: rgba($bg,  map-get($ui-btn-disabled, "background-opacity"));
+		background: rgba($bg,  map-get($btn-disable, "background-opacity"));
 	}
 	@if (map-get($btn-colors, border) == transparent) {
 		border-color: map-get($btn-colors, border);
 	} @else {
-		border-color: rgba(map-get($btn-colors, border), map-get($ui-btn-disabled, "background-opacity"));
+		border-color: rgba(map-get($btn-colors, border), map-get($btn-disable, "background-opacity"));
 	}
 }

scss/atoms/typography/_functions.scss

@@ -11,6 +11,6 @@
 * 1. font-size: em(14px);
 * 2. font-size: em(30px/14px);
 */
-@function em($value, $context: map-get($font-default, font-size)) {
+@function em($value, $context: map-get($typography-font-default, font-size)) {
 	@return ($value / $context * 1em);
 }

scss/atoms/typography/_typography.scss

@@ -10,38 +10,38 @@
 	"mixins";
 
 body {
-	font: $normal #{ map-get( $font-default, font-size ) }/1.5 $sans;
+	font: $typography-normal #{ map-get( $typography-font-default, font-size ) }/1.5 $typography-sans;
 
-	@media ( max-width: $viewport-md-min ) {
+	@media ( max-width: $breakpoints-viewport-md-min ) {
 		font-size: 16px;
 	}
-	@media ( max-width: $viewport-sm-min ) {
+	@media ( max-width: $breakpoints-viewport-sm-min ) {
 		font-size: 14px;
 	}
 }
 
 h1 {
-	@include heading($h1);
+	@include heading($typography-h1);
 }
 
 h2 {
-	@include heading($h2);
+	@include heading($typography-h2);
 }
 
 h3 {
-	@include heading($h3);
+	@include heading($typography-h3);
 }
 
 h4 {
-	@include heading($h4);
+	@include heading($typography-h4);
 }
 
 h5 {
-	@include heading($h5);
+	@include heading($typography-h5);
 }
 
 h6 {
-	@include heading($h6);
+	@include heading($typography-h6);
 }
 
 /*
@@ -52,21 +52,21 @@ h6 {
 
 hr {
 	border: 0;
-	border-bottom: map-get($hr, thickness) map-get($hr, style) map-get($hr, color);
+	border-bottom: map-get($typography-hr, thickness) map-get($typography-hr, style) map-get($typography-hr, color);
 }
 
 blockquote {
 	margin: 0;
-	padding-left: map-get($blockquote,padding-left); //TODO consider all padding variables
+	padding-left: map-get($typography-blockquote,padding-left); //TODO consider all padding variables
 	position: relative;
-	border-left: map-get($blockquote,border);
-	font-style: map-get($blockquote,font-style);
+	border-left: map-get($typography-blockquote,border);
+	font-style: map-get($typography-blockquote,font-style);
 }
 
 pre {
 	padding: 16px 20px;
-	background: map-get($pre,background);
-	font: normal 12px/1.4 $monospace;
+	background: map-get($typography-pre,background);
+	font: normal 12px/1.4 $typography-monospace;
 }
 
 /*
@@ -90,27 +90,27 @@ dd {
 */
 
 a {
-	@include link($link);
+	@include link($typography-link);
 	&:visited {
-		@include link($link-visited);
+		@include link($typography-link-visited);
 	}
 	&:active,
 	&:focus {
-		@include link($link-focus);
+		@include link($typography-link-focus);
 	}
 	&:hover {
-		@include link($link-hover);
+		@include link($typography-link-hover);
 	}
 }
 
 b,
 strong {
-	font-weight: $bold;
+	font-weight: $typography-bold;
 }
 
 code {
-	background: map-get($code,background);
+	background: map-get($typography-code,background);
 	font-size: em( 16px );
 	padding: em( 4px, 16px ) em( 8px, 16px );
-	border-radius: map-get($code,border-radius);
+	border-radius: map-get($typography-code,border-radius);
 }