susy 2.0.0.beta.1 → 2.0.0.beta.2

data/sass/susy/language/susy/_breakpoint-plugin.scss

@@ -16,7 +16,7 @@
 ) {
   @if mixin-exists(breakpoint) {
     @include breakpoint($query, $no-query) {
-      @include use-grid($layout) {
+      @include with-layout($layout) {
         @content;
       }
     }

data/sass/susy/language/susy/_container.scss

@@ -4,54 +4,54 @@
 // Container [mixin]
 // -----------------
 // Set a container element
-// - [$grid]  : <settings>
+// - [$layout]  : <settings>
 @mixin container(
-  $grid: $susy
+  $layout: $susy
 ) {
-  $grid       : parse-grid($grid);
+  $layout     : parse-grid($layout);
 
-  $width      : get-container-width($grid);
-  $justify    : parse-container-position(susy-get(container-position, $grid));
-  $property   : if(susy-get(math, $grid) == static, width, max-width);
+  $width      : get-container-width($layout);
+  $justify    : parse-container-position(susy-get(container-position, $layout));
+  $property   : if(susy-get(math, $layout) == static, width, max-width);
 
-  $box        : susy-get(box-sizing, $grid);
+  $box        : susy-get(box-sizing, $layout);
 
   @if $box {
     @include susy-box-sizing($box);
   }
 
   @include float-container($width, $justify, $property);
-  @include show-grid($grid);
+  @include show-grid($layout);
 }
 
 // Container [function]
 // --------------------
 // Return container width
-// - [$grid]  : <settings>
+// - [$layout]  : <settings>
 @function container(
-  $grid: $susy
+  $layout: $susy
 ) {
-  $grid: parse-grid($grid);
-  @return get-container-width($grid);
+  $layout: parse-grid($layout);
+  @return get-container-width($layout);
 }
 
 // Get Container Width
 // -------------------
 // Calculate the container width
-// - [$grid]: <settings>
+// - [$layout]: <settings>
 @function get-container-width(
-  $grid: $susy
+  $layout: $susy
 ) {
-  $grid           : parse-grid($grid);
-  $width          : susy-get(container, $grid);
-  $column-width   : susy-get(column-width, $grid);
+  $layout         : parse-grid($layout);
+  $width          : susy-get(container, $layout);
+  $column-width   : susy-get(column-width, $layout);
 
   @if not $width or $width == auto {
     @if $column-width {
-      $columns        : susy-get(columns, $grid);
-      $gutters        : susy-get(gutters, $grid);
-      $spread         : if(is-split($grid), wide, narrow);
-      $width          : calculate-container-width($columns, $gutters, $column-width, $spread);
+      $columns        : susy-get(columns, $layout);
+      $gutters        : susy-get(gutters, $layout);
+      $spread         : if(is-split($layout), wide, narrow);
+      $width          : column-sum($columns, $gutters, $spread) * $column-width;
     } @else {
       // if we have nothing, default to 100%
       $width: 100%;

data/sass/susy/language/susy/_context.scss

@@ -13,7 +13,7 @@
   $location   : get-location($context);
   $columns    : susy-get(columns, $context);
 
-  @return get-columns($span, $location, $columns);
+  @return column-span($span, $location, $columns);
 }
 
 // Nested [mixin]
@@ -24,11 +24,11 @@
 @mixin nested(
   $context
 ) {
-  $context    : parse-span($context);
-  $old        : susy-get(columns);
-  $susy       : map-merge($susy, (columns: nested($context))) !global;
+  $context  : parse-span($context);
+  $old      : susy-get(columns);
+  $susy     : map-merge($susy, (columns: nested($context))) !global;
 
   @content;
 
-  $susy       : map-merge($susy, (columns: $old)) !global;
+  $susy     : map-merge($susy, (columns: $old)) !global;
 }

data/sass/susy/language/susy/_gallery.scss

@@ -4,23 +4,23 @@
 // Gallery
 // -------
 // Create an isolated gallery
-// - $input       : <span>
+// - $span        : <span>
 // - [$selector]  : child | of-type
 @mixin gallery(
-  $layout,
+  $span,
   $selector: child
 ) {
-  $layout       : parse-span($layout);
-  $layout       : map-merge($layout, (location: 1));
+  $span       : parse-span($span);
+  $span       : map-merge($span, (location: 1));
 
-  $span         : susy-get(span, $layout);
-  $columns      : susy-get(columns, $layout);
+  $n            : susy-get(span, $span);
+  $columns      : susy-get(columns, $span);
   $context      : column-count($columns);
-  $flow         : susy-get(flow, $layout);
+  $flow         : susy-get(flow, $span);
 
-  $inside       : is-inside($layout);
+  $inside       : is-inside($span);
   $from         : from($flow);
-  $line         : floor($context / $span);
+  $line         : floor($context / $n);
   $symmetrical  : is-symmetrical($columns);
 
   $output: (
@@ -34,7 +34,7 @@
   );
 
   @if $inside {
-    $gutters: get-gutters($layout);
+    $gutters: get-gutters($span);
     $output: map-merge($output, (
       padding_before: map-get($gutters, before),
       padding_after: map-get($gutters, after),
@@ -42,10 +42,10 @@
   }
 
   @if $symmetrical {
-    $output: map-merge($output, (width: get-span-width($layout)));
+    $output: map-merge($output, (width: get-span-width($span)));
   }
 
-  $box          : susy-get(box-sizing, $layout);
+  $box          : susy-get(box-sizing, $span);
   $global-box   : if(susy-get(global-box-sizing) == 'border-box', true, false);
 
   // Collective Output
@@ -59,13 +59,13 @@
 
   // Individual Loop
   @for $item from 1 through $line {
-    $n: '#{$line}n + #{$item}';
-    &:nth-#{$selector}(#{$n}) {
+    $nth: '#{$line}n + #{$item}';
+    &:nth-#{$selector}(#{$nth}) {
       // Individual Prep
       $output: (
-        width             : if($symmetrical, null, get-span-width($layout)),
+        width             : if($symmetrical, null, get-span-width($span)),
         float             : null,
-        margin_before     : get-isolation($layout),
+        margin_before     : get-isolation($span),
         margin_after      : -100%,
         padding_before    : null,
         padding_after     : null,
@@ -75,17 +75,17 @@
       // Individual Output
       @include float-span-output($output...);
 
-      @if get-edge($layout) == first {
+      @if get-edge($span) == first {
         @include break;
-        @include first($layout);
+        @include first($span);
       } @else {
         @include nobreak;
       }
 
       // Individual Location Increment
-      $location: get-location($layout) + $span;
+      $location: get-location($span) + $n;
       $location: if($location > $context, 1, $location);
-      $layout: map-merge($layout, (location: $location));
+      $span: map-merge($span, (location: $location));
     }
   }
 }

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

@@ -1,36 +1,26 @@
 // Grid Syntax
 // ===========
 
-// Set Grid
-// --------
-// Set a new grid using a shorthand
-// - $grid: <settings>
-@mixin set-grid(
-  $grid
-) {
-  $susy: map-merge($susy, parse-grid($grid)) !global;
-}
-
-// Susy Set
-// --------
-// Change one setting
-@mixin susy-set(
-  $key,
-  $value
+// Layout
+// ------
+// Set a new layout using a shorthand
+// - $layout: <settings>
+@mixin layout(
+  $layout
 ) {
-  $susy: map-merge($susy, ($key: $value)) !global;
+  $susy: map-merge($susy, parse-grid($layout)) !global;
 }
 
 // Use Grid
 // --------
-// Use an arbitrary grid for a section of code
-// - $grid: <settings>
-@mixin use-grid(
-  $grid
+// Use an arbitrary layout for a section of code
+// - $layout: <settings>
+@mixin with-layout(
+  $layout
 ) {
   $old: $susy;
 
-  @include set-grid($grid);
+  @include layout($layout);
   @content;
 
   $susy: $old !global;
@@ -39,9 +29,9 @@
 // Layout
 // ------
 // Return a parsed layout map based on shorthand syntax
-// - $grid: <settings>
+// - $layout: <settings>
 @function layout(
-  $grid: $susy
+  $layout: $susy
 ) {
-  @return parse-grid($grid);
+  @return parse-grid($layout);
 }

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

@@ -4,19 +4,19 @@
 // Gutters
 // -------
 // Set gutters on an element.
-// - [$context]   : <settings>
+// - [$span]   : <settings>
 @mixin gutters(
-  $context: $susy
+  $span: $susy
 ) {
-  $context    : parse-gutters($context);
-  $gutters    : get-gutters($context);
+  $span    : parse-gutters($span);
+  $gutters    : get-gutters($span);
   $output     : (
     before: map-get($gutters, before),
     after: map-get($gutters, after),
-    flow: susy-get(flow, $context),
+    flow: susy-get(flow, $span),
   );
 
-  @if is-inside($context) {
+  @if is-inside($span) {
     @include padding-output($output...);
   } @else {
     @include margin-output($output...);
@@ -24,30 +24,30 @@
 }
 
 @mixin gutter(
-  $context: $susy
+  $span: $susy
 ) {
-  @include gutters($context);
+  @include gutters($span);
 }
 
 // Gutter
 // ------
 // Return the width of a gutter.
-// - [$context]   : <settings>
+// - [$span]   : <settings>
 @function gutter(
-  $context: $susy
+  $span: $susy
 ) {
-  $context: parse-gutters($context);
+  $span: parse-gutters($span);
 
-  $gutters: get-gutters($context);
+  $gutters: get-gutters($span);
   $gutters: map-get($gutters, before) or map-get($gutters, after);
 
   @return $gutters;
 }
 
 @function gutters(
-  $context: $susy
+  $span: $susy
 ) {
-  @return gutter($context);
+  @return gutter($span);
 }
 
 // Get Gutter Width

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

@@ -1,22 +1,45 @@
 // Isolation Syntax
 // ================
 
-// Isolate
-// -------
+
+// Isolate [Mixin]
+// ---------------
 // Set isolation as an override.
-// - $input   : <span>
+// - $location: <span>
 @mixin isolate(
-  $input: first
+  $isolate: 1
 ) {
-  $input  : parse-span($input);
-  $output : (
-    push: get-isolation($input),
-    flow: susy-get(flow, $input),
+  $output: (
+    push: isolate($isolate),
+    flow: susy-get(flow, $isolate),
   );
 
   @include isolate-output($output...);
 }
 
+
+// Isolate [function]
+// ------------------
+// Return an isolation offset width.
+// - $location: <span>
+@function isolate(
+  $isolate: 1
+) {
+  $isolate: parse-span($isolate);
+  $isolation: susy-get(span, $isolate);
+
+  @if $isolation and not get-location($isolate) {
+    $new: (
+      span: null,
+      location: $isolation,
+    );
+    $isolate: map-merge($isolate, $new);
+  }
+
+  @return get-isolation($isolate);
+}
+
+
 // Get Isolation
 // -------------
 // Return the isolation offset width
@@ -24,7 +47,6 @@
 @function get-isolation(
   $input
 ) {
-  $span       : susy-get(span, $input);
   $location   : get-location($input);
   $columns    : susy-get(columns, $input);
   $width      : null;

data/sass/susy/language/susy/_margins.scss

@@ -63,11 +63,21 @@
 // - [$post]  : <span>
 @mixin squish(
   $pre,
-  $post: $pre
+  $post: false
 ) {
-  $pre      : if(length($pre) == 1 and length($post) > 1, set-nth($post, 1, $pre), $pre);
-  $pre      : map-merge((spread: wide), parse-span($pre));
-  $post     : map-merge((spread: wide), parse-span($post));
+  $pre: map-merge((spread: wide), parse-span($pre));
+
+  @if $post {
+    $post: map-merge((spread: wide), parse-span($post));
+  } @else {
+    $span: susy-get(span, $pre);
+    @if length($span) > 1 {
+      $pre: map-merge($pre, (span: nth($span, 1)));
+      $post: map-merge($pre, (span: nth($span, 2)));
+    } @else {
+      $post: $pre;
+    }
+  }
 
   @include pre($pre);
   @include post($post);

data/sass/susy/language/susy/_padding.scss

@@ -46,11 +46,21 @@
 // - [$post]  : <span>
 @mixin pad(
   $pre,
-  $post: $pre
+  $post: false
 ) {
-  $pre      : if(length($pre) == 1 and length($post) > 1, set-nth($post, 1, $pre), $pre);
-  $pre      : map-merge((spread: wide), parse-span($pre));
-  $post     : map-merge((spread: wide), parse-span($post));
+  $pre: map-merge((spread: wide), parse-span($pre));
+
+  @if $post {
+    $post: map-merge((spread: wide), parse-span($post));
+  } @else {
+    $span: susy-get(span, $pre);
+    @if length($span) > 1 {
+      $pre: map-merge($pre, (span: nth($span, 1)));
+      $post: map-merge($pre, (span: nth($span, 2)));
+    } @else {
+      $post: $pre;
+    }
+  }
 
   @include prefix($pre);
   @include suffix($post);

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

@@ -20,7 +20,7 @@
 
 // Full
 // ----
-// - [$span]: <span settings>
+// - [$context]: <layout shorthand>
 @mixin full(
   $context: $susy
 ) {
@@ -30,44 +30,44 @@
 
 // First
 // -----
-// - [$grid]: <settings>
+// - [$context]: <settings>
 @mixin first(
-  $grid: $susy
+  $context: $susy
 ) {
-  $grid: parse-grid($grid);
-  $flow: susy-get(flow, $grid);
+  $context: parse-grid($context);
+  $flow: susy-get(flow, $context);
 
-  @if not is-split($grid) {
+  @if not is-split($context) {
     @include float-first($flow);
   }
 }
 
 @mixin alpha(
-  $grid: $susy
+  $context: $susy
 ) {
-  @include first($grid);
+  @include first($context);
 }
 
 
 // Last
 // ----
-// - [$grid]: <settings>
+// - [$context]: <settings>
 @mixin last(
-  $grid: $susy
+  $context: $susy
 ) {
-  $grid: parse-grid($grid);
+  $context: parse-grid($context);
   $output: (
-    flow: susy-get(flow, $grid),
-    margin: if(is-split($grid), gutters($grid), 0),
+    flow: susy-get(flow, $context),
+    margin: if(is-split($context), null, 0),
   );
 
   @include float-last($output...);
 }
 
 @mixin omega(
-  $grid: $susy
+  $context: $susy
 ) {
-  @include last($grid);
+  @include last($context);
 }
 
 
@@ -85,9 +85,12 @@
     $location: susy-get(location, $span);
     $n: susy-get(span, $span);
 
+    $number: if(type-of($location) == number, true, false);
+    $index: if($number and unitless($location), true, false);
+
     @if $n == $count {
       $edge: full;
-    } @else if $location {
+    } @else if $location and $n and $index {
       @if $location == 1 {
         $edge: if($n == $count, full, first);
       } @else if $location + $n - 1 == $count {