Merge pull request #61 from cmalven/next

Next > Master

.gitignore

@@ -1,3 +1,4 @@
 .DS_Store
+.idea
 node_modules
 npm-debug.log

_color.scss

@@ -31,7 +31,7 @@ $shade-mix: #000 !default;
   @if map-has-key($map, $key) {
     @return map-get($map, $key);
   } @else {
-    @warn "Key #{$key} doesn't exist in map #{$map}";
+    @error "Key `#{$key}` doesn't exist in map `#{$map}`";
   }
 }
 
@@ -77,10 +77,10 @@ $output-color-helpers: true !default;
 
 @mixin output-color-helpers {
   @each $color in map-keys($colors) {
-    .h-color-text-#{$color} {
+    #{'.h-color-text-' + $color} {
       color: color($color);
     }
-    .h-color-bg-#{$color} {
+    #{'.h-color-bg-' + $color} {
       background-color: color($color);
     }
   }

_compare-unit.scss

@@ -0,0 +1,22 @@
+// ===============================================================
+// Compare Unit
+// ===============================================================
+/*
+  Compares number values in a list and warns if not all units are the same
+
+  @param  {List} $values     - List of values to compare
+  @return {Boolean}          - Are any units different
+*/
+
+@function compare-unit($values) {
+  $unit: unit(nth($values, 1));
+  $all-equal: true;
+
+  @each $val in $values {
+    @if unit($val) != $unit {
+      $all-equal: false;
+    }
+  }
+
+  @return $all-equal;
+}

_fluid-size.scss

@@ -59,6 +59,9 @@ $fluid-min-width: 320px !default;
   @if map-has-key($map, $size) {
     @return map-get($map, $size);
   }
+  @else {
+    @error "Key `#{$size}` doesn't exist in map `#{$map}`";
+  }
 }
 
 
@@ -79,6 +82,9 @@ $fluid-min-width: 320px !default;
     $size-set: get-spacing-size($size);
     @include output-fluid-sizes($size-set, $property, $negative, $adjust, $scale);
   }
+  @else {
+    @error "Key `#{$size}` doesn't exist in map `$fluid-sizes`";
+  }
 }
 
 

_fluid.scss

@@ -1,4 +1,5 @@
 @import "strip-unit";
+@import "compare-unit";
 
 // =========================================================================
 //
@@ -43,7 +44,12 @@
 
   $min-value: ($min-value * $scale) + $adjust;
   $max-value: ($max-value * $scale) + $adjust;
-
+
+  // Ensure that all values are consistent
+  @if compare-unit($min-size $max-size $min-value $max-value) != true {
+    @warn "All number values passed to `fluid` mixin should have the same unit";
+  }
+
   @if $include-min {
     @each $property in $properties {
       #{$property}: $min-value;

_type-styles.scss

@@ -3,9 +3,9 @@
 @import "node_modules/sass-mq/mq";
 @import "fluid-size";
 
-//===============================================================
+// ---------------------------------------------------------------
 // Type Styles
-//===============================================================
+// ---------------------------------------------------------------
 /*
   Utility that automatically generates all of the type styles
   for a project. Relies on $type-styles and $font-stacks map variables existing in the following format:
@@ -48,9 +48,9 @@ $type-styles: (
 ) !default;
 
 
-//---------------------------------------------------------------
+// ---------------------------------------------------------------
 // Get Style Map
-//---------------------------------------------------------------
+// ---------------------------------------------------------------
 /*
   Function for getting a specific style map from within the $type-styles map
   @param $key (string)  - Key style you want
@@ -60,7 +60,7 @@ $type-styles: (
   @if map-has-key($map, $key) {
     @return map-get($map, $key);
   } @else {
-    @warn "Key #{$key} doesn't exist in map #{$map}";
+    @error "Key `#{$key}` doesn't exist in map `#{$map}`";
   }
 }
 
@@ -80,9 +80,9 @@ $type-styles: (
 }
 
 
-//---------------------------------------------------------------
+// ---------------------------------------------------------------
 // Font Stack Styles
-//---------------------------------------------------------------
+// ---------------------------------------------------------------
 /*
   Generates font styles related to a specific font-stack.
   @param $key (string)  - Key to find in $map
@@ -94,12 +94,15 @@ $type-styles: (
     font-weight: map-deep-get($map, $key, 'font-weight');
     font-style: map-deep-get($map, $key, 'font-style');
   }
+  @else {
+    @error "Key `#{$key}` doesn't exist in map `#{$map}`";
+  }
 }
 
 
-//---------------------------------------------------------------
+// ---------------------------------------------------------------
 // Get Type Style
-//---------------------------------------------------------------
+// ---------------------------------------------------------------
 /*
   Mixin for getting a font-stack and size from the $type-styles map.
   @param $key (string)  - Should be a top level key from the $type-styles map
@@ -131,13 +134,15 @@ $type-styles: (
       }
     }
   }
+  @else {
+    @error "Key `#{$key}` doesn't exist in map `#{$map}`";
+  }
 }
 
 
-
-//---------------------------------------------------------------
+// ---------------------------------------------------------------
 // Type Styles
-//---------------------------------------------------------------
+// ---------------------------------------------------------------
 /*
   Generate font-family and typesize styles across breakpoints.
   @param $key (string)   - Should be a top level key from the $type-styles map
@@ -167,9 +172,9 @@ $type-styles: (
 }
 
 
-//---------------------------------------------------------------
+// ---------------------------------------------------------------
 // Output Helper Classes
-//---------------------------------------------------------------
+// ---------------------------------------------------------------
 /*
   Loop through the $type-styles map (defined in `_base/variables.scss`)
   and generate helpers classes we can use to apply directly into our