Add a mixin that ties a breakpoint to certain grid settings for accur…

…ate span-column()s

stylesheets/_config.sass

@@ -59,10 +59,10 @@ $desktop-grid-padding: pxtoem(10px, $base-font-size)
 // Susy: responsive breakpoint settings
 // ------------------------------------------------
 // Breakpoints
-$tablet:      pxtoem(569px, $base-font-size) lt-ie9
-$tablet-only: pxtoem(569px, $base-font-size) 8 pxtoem(1024px, $base-font-size)
-$tablet-max:  8 pxtoem(1024px, $base-font-size)
-$desktop:     pxtoem(1025px, $base-font-size) lt-ie9
+$bp-tablet:      pxtoem(569px, $base-font-size) lt-ie9
+$bp-tablet-only: pxtoem(569px, $base-font-size) 8 pxtoem(1024px, $base-font-size)
+$bp-tablet-max:  8 pxtoem(1024px, $base-font-size)
+$bp-desktop:     pxtoem(1025px, $base-font-size) lt-ie9
 
 // In IE7 & 8 at-breakpoint() blocks are scoped to a .lt-ie9 class instead of desktop or tablet media queries.
 $breakpoint-media-output: not $lt-ie9

stylesheets/application.sass

@@ -8,7 +8,7 @@
 
 // Yours
 @import functions/**/*
-// @import mixins/**/*
+@import mixins/**/*
 
 
 // Global config variables, colour palette, etc

stylesheets/mixins/_at_breakpoint_with_grid_settings.sass

@@ -0,0 +1,19 @@
+// If you want to use Susy's grid mixins (eg span-columns) at a breakpoint other than the 
+// default mobile one, you'll need to use this mixin instead of at-breakpoint to ensure the
+// correct grid settings are used.
+
+=at-breakpoint-with-grid-settings( $bp )
+  @if $bp == "tablet"
+    +at-breakpoint($bp-tablet)
+      +with-grid-settings($tablet-total-columns, $tablet-column-width, $tablet-gutter-width, $tablet-grid-padding)
+        @content
+
+  @else if $bp == "tablet-only"
+    +at-breakpoint($bp-tablet-only)
+      +with-grid-settings($tablet-total-columns, $tablet-column-width, $tablet-gutter-width, $tablet-grid-padding)
+        @content
+
+  @else if $bp == "desktop"
+    +at-breakpoint( $bp-desktop )
+      +with-grid-settings($desktop-total-columns, $desktop-column-width, $desktop-gutter-width, $desktop-grid-padding)
+        @content

stylesheets/modules/_example_module_b.sass

@@ -4,14 +4,14 @@
   +post(1)
   background-color: rgba(255, 0, 0, 0.5)
 
-  +at-breakpoint($tablet)
-    +pre(1, $tablet-total-columns)
-    +span-columns(6, $tablet-total-columns)
-    +post(1, $tablet-total-columns)
+  +at-breakpoint-with-grid-settings("tablet")
+    +pre(1)
+    +span-columns(6)
+    +post(1)
     background-color: rgba(0, 255, 0, 0.5)
 
-  +at-breakpoint($desktop)
-    +pre(2, $desktop-total-columns)
-    +span-columns(8, $desktop-total-columns)
-    +post(2, $desktop-total-columns)
+  +at-breakpoint-with-grid-settings("desktop")
+    +pre(2)
+    +span-columns(8)
+    +post(2)
     background-color: rgba(0, 0, 255, 0.5)

stylesheets/modules/_grid.sass

@@ -1,7 +1,7 @@
 // This module is a top-level Susy grid container.
 //
-// You can use Susy methods like span-columns() and at-breakpoint() in modules that
-// are placed inside this container. 
+// You can use Susy's at-breakpoint() in modules that are placed inside this container.
+// To use Susy's grid mixins (eg span-columns), use at-breakpoint-with-grid-settings() instead.
 //
 // You'll eventually want to delete the +susy-grid-background lines.
 //
@@ -11,14 +11,12 @@
   +container
   +susy-grid-background
 
-  +at-breakpoint($tablet)
-    +with-grid-settings($tablet-total-columns, $tablet-column-width, $tablet-gutter-width, $tablet-grid-padding)
-      +container
-      +susy-grid-background
+  +at-breakpoint-with-grid-settings("tablet")
+    +container
+    +susy-grid-background
 
-  +at-breakpoint($desktop)
-    +with-grid-settings($desktop-total-columns, $desktop-column-width, $desktop-gutter-width, $desktop-grid-padding)
-      +container
-      +susy-grid-background
-      @if $lt-ie9
-        width: pxtoem(1024px, $base-font-size) // Force static width for IE7+8
+  +at-breakpoint-with-grid-settings("desktop")
+    +container
+    +susy-grid-background
+    @if $lt-ie9
+      width: pxtoem(1024px, $base-font-size) // Force static width for IE7+8