calc()-grid

__test__/src/scss/test.scss

@@ -17,7 +17,6 @@ body {
 
 .block {
   // * Behave like a grid-item
-  @include i;
   background: $color-secondary;
   border: 1px solid $color-border;
   box-shadow: inset 0 0 0.5em 0.5em rgba($color-shade, 0.1);

__test__/src/scss/tests/_modifiers.scss

@@ -4,6 +4,7 @@
   }
 
   &-item {
+    $hagrid-gutter: 3rem;
     @include i(1/3);
 
     &:last-child {
@@ -21,6 +22,18 @@
     @include g(right);
   }
 
+  &-full {
+    @include g(full);
+  }
+
+  &-wide {
+    @include g;
+  }
+
+  &-narrow {
+    @include g;
+  }
+
   &-center {
     @include g(center);
   }
@@ -49,18 +62,6 @@
     }
   }
 
-  &-narrow {
-    @include g(narrow);
-  }
-
-  &-full {
-    @include g(full);
-  }
-
-  &-wide {
-    @include g(wide);
-  }
-
   &-xrev {
     @include g(rev);
   }

scss/_hagrid.scss

@@ -7,16 +7,10 @@
 ////
 
 /// Gutters
-/// Set gutters usable as modifiers.
+/// Set gutter used in grid calculation
 /// @property {Number}
 
-$hagrid-gutters:
-  (
-    default: 1.5rem,
-    full: 0,
-    narrow: 0.5rem,
-    wide: 3rem
-  ) !default;
+$hagrid-gutter: 1.5rem !default;
 
 /// Breakpoints
 /// Can be used for the grid e.g. @include i(breakpoint 2/3)

scss/hagrid/_functions.scss

@@ -18,7 +18,7 @@
   @if $arg-length == 0 {
     // * If no params are passed, default to mobile-first
     @if $prop == width {
-      #{$prop}: 100%;
+      #{$prop}: get-calc(100%);
     }
 
     @else {
@@ -34,7 +34,8 @@
 
       // * If a general width is passed in, use it
       @if type-of($width) == number {
-        #{$prop}: calculate-width($width);
+        @include get-prop($prop, $width);
+
         $width-detected: true;
       }
       // * If false is passed, assign no width
@@ -64,7 +65,7 @@
         @if $bp != false {
           @include bp(#{$key}) {
             @if type-of($value) == number {
-              #{$prop}: calculate-width($value);
+              @include get-prop($prop, $value);
             }
 
             @else if $value == auto {
@@ -86,7 +87,7 @@
 
     // * If only responsive params are passed, default to mobile-first
     @if $width-detected == false and $prop == width {
-      #{$prop}: 100%;
+      #{$prop}: get-calc(100%);
     }
   }
 }
@@ -105,20 +106,28 @@
   }
 }
 
-/// Check if a reference exists in $hagrid-gutters
-/// @param {String} $id
-/// @return {Boolean}
+/// Calculate a calc value based on a gutter
+/// @param {Number} $width
+/// @param {Number} $gutter
+/// @return {Value}
 
-@function hagrid-gutter-exists($id) {
-  @return map-has-key($hagrid-gutters, $id);
+@function get-calc($width, $gutter: $hagrid-gutter) {
+  @return unquote("calc(#{calculate-width($width)} - #{$hagrid-gutter})");
 }
 
-/// Get a referenced item from $hagrid-gutters
-/// @param {String} $id
-/// @return {String}
+/// Return calc() or width() based on prop
+/// @param {String} $prop
+/// @param {Number} $value
+/// @return {Value}
+
+@mixin get-prop($prop, $value) {
+  @if $prop == width {
+    #{$prop}: get-calc($value);
+  }
 
-@function hagrid-gutter-get($id) {
-  @return map-get($hagrid-gutters, $id);
+  @else {
+    #{$prop}: calculate-width($value);
+  }
 }
 
 /// Validate a breakpoint-key and return itself, its value or false
@@ -197,3 +206,12 @@
 
   @return str-slice($string, -1 * str-length($needle)) == $needle;
 }
+
+@function halves($num) {
+  @if type-of($num) != "number" {
+    @warn "`halves` function expecting a number; #{type-of($num)} given.";
+    @return false;
+  }
+
+  @return ($num / 2);
+}

scss/hagrid/_modifiers.scss

@@ -22,7 +22,7 @@
 /// @output Modifier-styles for a given call
 
 @mixin grid-modifiers($modifiers...) {
-  $gutter: hagrid-gutter-get(default);
+  $gutter: $hagrid-gutter;
   $is-y: false;
   $is-wrap: false;
   $is-not-spacing: true;
@@ -37,7 +37,7 @@
       $is-wrap: true;
     }
 
-    @elseif hagrid-gutter-exists($modifier) {
+    @elseif $modifier == full {
       $is-not-spacing: false;
     }
 
@@ -58,7 +58,7 @@
 
   #{$hagrid-item-selector} {
     @if $is-not-spacing == true {
-      padding-left: $gutter;
+      margin-left: $gutter;
     }
   }
 }
@@ -108,20 +108,7 @@
     }
   }
 
-  @else {
-    // * Gutter Modifiers
-
-    @if hagrid-gutter-exists($modifier) {
-      $gutter: hagrid-gutter-get($modifier);
-      margin-left: -$gutter;
-
-      #{$hagrid-item-selector} {
-        padding-left: $gutter;
-      }
-    }
-
-    @else {
-      @error "Modifier #{$modifier} does not exist.";
-    }
+  @elseif $modifier != full {
+    @error "Modifier #{$modifier} does not exist.";
   }
 }