susy 2.0.0.alpha.6 → 2.0.0.beta.1

data/sass/susy/language/susy/_grids.scss

@@ -4,24 +4,27 @@
 // Set Grid
 // --------
 // Set a new grid using a shorthand
-// - $grid      : <settings>
+// - $grid: <settings>
 @mixin set-grid(
   $grid
 ) {
   $susy: map-merge($susy, parse-grid($grid)) !global;
 }
 
-// Alternative syntax
+// Susy Set
+// --------
+// Change one setting
 @mixin susy-set(
-  $grid
+  $key,
+  $value
 ) {
-  @include set-grid($grid);
+  $susy: map-merge($susy, ($key: $value)) !global;
 }
 
 // Use Grid
 // --------
 // Use an arbitrary grid for a section of code
-// - $grid      : <settings>
+// - $grid: <settings>
 @mixin use-grid(
   $grid
 ) {
@@ -32,3 +35,13 @@
 
   $susy: $old !global;
 }
+
+// Layout
+// ------
+// Return a parsed layout map based on shorthand syntax
+// - $grid: <settings>
+@function layout(
+  $grid: $susy
+) {
+  @return parse-grid($grid);
+}

data/sass/susy/language/susy/_gutters.scss

@@ -58,10 +58,10 @@
   $context: $susy
 ) {
   $context  : parse-gutters($context);
+  $gutters  : susy-get(gutters, $context);
   $gutter   : susy-get(gutter-override, $context);
 
-  @if not $gutter {
-    $gutters: susy-get(gutters, $context);
+  @if $gutters and ($gutters > 0) and not $gutter {
     $column-width: susy-get(column-width, $context);
     @if $column-width and gutter-math($context) == static {
       $gutter: $gutters * $column-width;
@@ -132,7 +132,7 @@
 @function gutter-math(
   $context: $susy
 ) {
-  $return   : susy-get(layout-math, $context);
+  $return   : susy-get(math, $context);
   $return   : if(susy-get(gutter-position, $context) == inside-static, static, $return);
 
   @return $return;

data/sass/susy/language/susy/_isolate.scss

@@ -25,14 +25,14 @@
   $input
 ) {
   $span       : susy-get(span, $input);
-  $location   : susy-get(location, $input);
+  $location   : get-location($input);
   $columns    : susy-get(columns, $input);
   $width      : null;
 
   @if type-of($location) == number and not unitless($location) {
     $width: $location;
-  } @else {
-    $push: get-location($span, $location, $columns) - 1;
+  } @else if $location {
+    $push: $location - 1;
     @if $push > 0 {
       $push: map-merge($input, (
         span: $push,
@@ -47,5 +47,5 @@
     $width: if($width == null, gutters($input), $width + gutters($input));
   }
 
-  @return $width;
+  @return $width or 0;
 }

data/sass/susy/language/susy/_rows.scss

@@ -1,46 +1,33 @@
 // Row Start & End
 // ===============
 
-// Row
-// ---
-// Apply to any layout element that should force a new layout row.
-// - [$flow]  : ltr | rtl
-@mixin row(
-  $flow: susy-get(flow)
-) {
-  @include susy-clearfix;
+
+// Break
+// -----
+// Apply to any element that should force a line break.
+@mixin break {
   clear: both;
 }
 
-// Unrow
-// -----
-// Cancel the row() effect, e.g. when using media queries.
-// - [$flow]: ltr | rtl
-@mixin unrow {
+
+// NoBreak
+// -------
+// Cancel the break() effect, e.g. when using media queries.
+@mixin nobreak {
   clear: none;
-  &:after {
-    content: none;
-    display: inline;
-    clear: none;
-  }
 }
 
+
 // Full
 // ----
 // - [$span]: <span settings>
 @mixin full(
-  $span: $susy
+  $context: $susy
 ) {
-  $span: parse-span($span);
-
-  @include row(susy-get(flow, $span));
-  @if is-split($span) and not susy-get(is-container, $span) {
-    @include gutters($span);
-  }
-  float: none;
-  width: auto;
+  @include span(full of parse-grid($context) break);
 }
 
+
 // First
 // -----
 // - [$grid]: <settings>
@@ -49,9 +36,8 @@
 ) {
   $grid: parse-grid($grid);
   $flow: susy-get(flow, $grid);
-  $split: if(susy-get(gutter-position, $grid) == split, true, false);
 
-  @if not $split {
+  @if not is-split($grid) {
     @include float-first($flow);
   }
 }
@@ -62,32 +48,9 @@
   @include first($grid);
 }
 
-// Nth-First
-// ---------
-// - [$value]   : first | last | only | <math>
-// - [$type]    : child | last-child | of-type | last-of-type
-@mixin nth-first(
-  $value: first,
-  $type: child,
-  $grid: $susy
-) {
-  &:#{format-nth($value,$type)} { @include first($grid); }
-}
-
-// Nth-Alpha
-// ---------
-// - [$value]   : first | last | only | <math>
-// - [$type]    : child | last-child | of-type | last-of-type
-@mixin nth-alpha(
-  $value: first,
-  $type: child,
-  $grid: $susy
-) {
-  @include nth-first($value, $type, $grid);
-}
 
 // Last
-// -----
+// ----
 // - [$grid]: <settings>
 @mixin last(
   $grid: $susy
@@ -95,7 +58,7 @@
   $grid: parse-grid($grid);
   $output: (
     flow: susy-get(flow, $grid),
-    margin: if(susy-get(gutter-position, $grid) == split, gutters($grid), 0),
+    margin: if(is-split($grid), gutters($grid), 0),
   );
 
   @include float-last($output...);
@@ -107,28 +70,58 @@
   @include last($grid);
 }
 
-// Nth-Last
+
+// Get Edge
 // --------
-// - [$value] : first | last | only | <math>
-// - [$type]  : child | last-child | of-type | last-of-type
-// - [$grid]  : <settings>
-@mixin nth-last(
-  $value: last,
-  $type: child,
-  $grid: $susy
+// Calculate edge value based on location, if possible
+@function get-edge(
+  $span
 ) {
-  &:#{format-nth($value,$type)} { @include last($grid); }
+  $span       : parse-span($span);
+  $edge       : susy-get(edge, $span);
+
+  @if not $edge {
+    $count: column-count(susy-get(columns, $span));
+    $location: susy-get(location, $span);
+    $n: susy-get(span, $span);
+
+    @if $n == $count {
+      $edge: full;
+    } @else if $location {
+      @if $location == 1 {
+        $edge: if($n == $count, full, first);
+      } @else if $location + $n - 1 == $count {
+        $edge: last;
+      }
+    }
+  }
+
+  @if $edge == alpha or $edge == omega {
+    $edge: if($edge == alpha, first, last);
+  }
+
+  @return $edge;
 }
 
-// Nth-Omega
-// ---------
-// - [$value] : first | last | only | <math>
-// - [$type]  : child | last-child | of-type | last-of-type
-// - [$grid]  : <settings>
-@mixin nth-omega(
-  $value: last,
-  $type: child,
-  $grid: $susy
+
+// Get Location
+// ------------
+// Calculate location value based on edge, if possible
+@function get-location(
+  $span
 ) {
-  @include nth-last($value, $type, $grid);
+  $span       : parse-span($span);
+  $location   : susy-get(location, $span);
+  $edge       : get-edge($span);
+  $n          : susy-get(span, $span);
+
+  @if $edge and not $location and type-of($n) == number and unitless($n) {
+    @if $edge == first {
+      $location: 1;
+    } @else if $edge == last {
+      $location: column-count(susy-get(columns, $span)) - $n + 1;
+    }
+  }
+
+  @return $location
 }

data/sass/susy/language/susy/_settings.scss

@@ -1,37 +1,39 @@
 // Susy Next Settings
 // ==================
 
-// Susy Defaults
-// -------------
-// - PRIVATE: DONT'T TOUCH
-$susy-defaults: map-merge($susy-defaults, (
+// Susy Language Defaults
+// ----------------------
+// - PRIVATE
+@include susy-defaults((
   container: auto,
-  last-flow: to,
-  layout-math: fluid,
-  layout-method: float,
-  flow: ltr,
-  box-sizing: false,
+  math: fluid,
+  output: float,
   container-position: center,
   gutter-position: after,
-  show-grids: show,
+  show-grids: hide,
+  global-box-sizing: content-box,
 ));
 
+$nullable: gutters container-position;
+
 // Valid Keyword Values
 // --------------------
 // - PRIVATE: DONT'T TOUCH
 $susy-keywords: (
   container: auto,
-  layout-math: static fluid,
-  layout-method: isolate float,
+  math: static fluid,
+  output: isolate float,
   container-position: left center right,
   flow: ltr rtl,
   show-grids: show hide show-columns show-baseline,
   gutter-position: before after split inside inside-static,
   box-sizing: border-box content-box,
-  location: first alpha last omega,
+  span: full,
+  edge: first alpha last omega full,
   spread: narrow wide wider,
   gutter-override: no-gutters no-gutter,
-  is-container: container,
+  role: nest,
+  clear: break nobreak,
 );
 
 // User Settings
@@ -182,7 +184,31 @@ $susy: () !default;
 @function parse-gutters(
   $short: $susy
 ) {
-  @return parse-span($short, gutter-override);
+  $gutters: parse-span($short, gutter-override);
+  $span: susy-get(gutter-override, $gutters);
+
+  @if $span and not map-get($gutters, columns) {
+    $context: ();
+    $new: ();
+
+    @each $item in $span {
+      @if type-of($item) == number and unitless($item) {
+        $context: append($context, $item);
+      } @else {
+        $new: append($new, $item);
+      }
+    }
+
+    $context: parse-grid($context);
+    $new: if(length($new) == 0, null, $new);
+    $new: if(length($new) == 1, nth($new, 1), $new);
+    $new: (gutter-override: if($new != $span, $new, $span));
+
+    $gutters: map-merge($gutters, $new);
+    $gutters: map-merge($gutters, $context);
+  }
+
+  @return $gutters;
 }
 
 // Susy Get
@@ -195,6 +221,18 @@ $susy: () !default;
   $grid: map-merge($susy-defaults, $susy)
 ) {
   $grid: parse-grid($grid);
+  $options: $grid $susy $susy-defaults;
+  $nullish: index($nullable, $key);
+  $break: false;
+  $return: null;
+
+  @each $opt in $options {
+    $keyset: index(map-keys($opt), $key);
+    @if not $break {
+      $return: map-get($opt, $key);
+      $break: $return or if($keyset and $nullish, true, false);
+    }
+  }
 
-  @return map-get($grid, $key) or map-get($susy, $key) or map-get($susy-defaults, $key);
+  @return $return;
 }

data/sass/susy/language/susy/_span.scss

@@ -8,13 +8,29 @@
 @mixin span(
   $span
 ) {
-  $span     : parse-span($span);
-  $output   : span-math($span);
-  $box      : susy-get(box-sizing, $span) or if(is-inside($span), border-box, null);
+  $span: parse-span($span);
+  $output: span-math($span);
+  $nesting: susy-get(span, $span);
+  $clear: susy-get(clear, $span);
+
+  $box: susy-get(box-sizing, $span);
+  $content-box: if(susy-get(global-box-sizing) != 'border-box', true, false);
+  $box: $box or if(is-inside($span) and $content-box, border-box, null);
+
+  @if $clear == break {
+    @include break;
+  } @else if $clear == nobreak {
+    @include nobreak;
+  }
 
   @include susy-box-sizing($box);
   @include float-span-output($output...);
-  @include nested($span) { @content; }
+
+  @if type-of($nesting) == number and unitless($nesting) {
+    @include nested($span) { @content; }
+  } @else {
+    @content;
+  }
 }
 
 // Span [function]
@@ -34,7 +50,10 @@
 @function span-math(
   $span
 ) {
-  $split-container  : if(is-split($span) and susy-get(is-container, $span), true, false);
+  $nest             : if(susy-get(role, $span) == nest, true, false);
+  $split-nest       : if(is-split($span) and $nest, true, false);
+  $edge             : get-edge($span);
+  $location         : get-location($span);
 
   $float            : from;
   $padding-before   : null;
@@ -44,38 +63,36 @@
 
   // calculate widths
   $spread: index(map-values($span), spread);
-  $span: if($split-container and not $spread, map-merge($span, (spread: wide)), $span);
+  $span: if($split-nest and not $spread, map-merge($span, (spread: wide)), $span);
   $width: get-span-width($span);
   $gutters: get-gutters($span);
 
   // apply gutters
   @if is-inside($span) {
-    @if not susy-get(is-container, $span) {
+    @if not susy-get(role, $span) {
       $padding-before: map-get($gutters, before);
       $padding-after: map-get($gutters, after);
     }
   } @else {
-    @if not ($split-container) {
+    @if not ($split-nest) {
       $margin-before: map-get($gutters, before);
       $margin-after: map-get($gutters, after);
     }
   }
 
   // special margin handling
-  @if susy-get(layout-method, $span) == isolate {
+  @if susy-get(output, $span) == isolate and $location {
     $margin-before: get-isolation($span);
     $margin-after: -100%;
-  } @else {
-    $location: susy-get(location, $span);
-    @if $location {
-      $last: is-last(susy-get(span, $span), $location, susy-get(columns, $span));
-      $is-split: is-split($span);
-      @if $last {
-        $float: susy-get(last-flow, $span);
-        $margin-after: if($is-split, $margin-after, null);
-      } @else if is-first($location) {
-        $margin-before: if($is-split, $margin-before, null);
-      }
+  } @else if $edge {
+    $is-split: is-split($span);
+    @if $edge == last or $edge == full {
+      $margin-after: if($is-split, $margin-after, null);
+    }
+    @if $edge == first or $edge == full {
+      $margin-before: if($is-split, $margin-before, null);
+    } @else if $edge == last {
+      $float: susy-get(last-flow, $span);
     }
   }
 
@@ -100,7 +117,7 @@
   $span     : parse-span($span);
 
   $n        : susy-get(span, $span);
-  $location : susy-get(location, $span);
+  $location : get-location($span);
   $columns  : susy-get(columns, $span);
   $gutters  : susy-get(gutters, $span);
   $spread   : susy-get(spread, $span);
@@ -109,11 +126,17 @@
   $span-sum : null;
   $width    : null;
 
+  @if $n == 'full' {
+    $pos: susy-get(gutter-position, $span);
+    $role: susy-get(role, $span);
+    $n: if($pos == split and $role != nest, column-count($columns), 100%);
+  }
+
   @if unitless($n) {
     $context: column-sum($columns, $gutters, if(is-split($span), wide, narrow));
     $span-sum: get-column-span-sum($n, $location, $columns, $gutters, if(is-inside($span), wide, $spread));
 
-    @if susy-get(layout-math, $span) == static {
+    @if susy-get(math, $span) == static {
       $width: $span-sum * susy-get(column-width, $span);
     } @else {
       $width: percentage($span-sum / $context);