Susy Custom Breakpoints to ease individual grid settings per breakpoint

_layout-scaffolding.scss

@import "susy";

// All of the em-based layouts assume 16 pixels as base font size

// Mobile First (i.e. Default Grid Settings)
$total-columns  : 4;              // 4 columns on mobile
$column-width   : 4.25em;            // ~= 68 pixels
$gutter-width   : 1em;            // ~= 16 pixel wide gutter between mobile columns
$grid-padding   : 0;              // No Padding with susy


// Tablet Breakpoint Settings
$tablet-total-columns: 8; 
$tablet-column-width: 5.125em;  // ~= 82 pixels
$tablet-gutter-width: 1em;      // ~= 16 pixels wide gutter between tablet columns
$tablet-grid-padding: 0;
$tablet-breakpoint: 48em $tablet-total-columns; // Apply this at 48ems (~768 pixels) or wider


// Desktop Breakpoint Settings
$desktop-total-columns: 12;
$desktop-column-width: 4.1875em; // ~= 67 pixels
$desktop-gutter-width: 1.25em;   // ~= 20 pixel wide gutter between desktop columns
$desktop-grid-padding: 0;
$desktop-breakpoint: 64em $desktop-total-columns; // apply this at 64ems (~1024 pixels) or wider


// Mixin to help define Tablet-Specific Styling
@mixin at-tablet-breakpoint() {
    @include at-tablet-breakpoint() {
        @include with-grid-settings($tablet-total-columns, $tablet-column-width, $tablet-gutter-width, $tablet-grid-padding) {
            @content;
        }
    }
}

// Mixin to help define Desktop Specific Styling
@mixin at-desktop-breakpoint() {
    @include at-desktop-breakpoint() {
        @include with-grid-settings($desktop-total-columns, $tablet-column-width, $desktop-gutter-width, $desktop-grid-padding) {
            @content;
        }
    }
}

_layout.scss

@import "_layout-scaffolding";

.page {
  $container-width: 100%;
	@include container;
	@include susy-grid-background;
  
  //... Mobile Specific Layout Styles

	@include at-tablet-breakpoint() {
		@include container;
		@include set-container-width;
		@include susy-grid-background;

		// ... Tablet Specific Layout Styles
	}

	@include at-desktop-breakpoint() {
		@include container;
		@include set-container-width;
		@include susy-grid-background;

		max-width: 1024px;
		// ... Desktop Specific Layout Styles
	}
}