CSS: Compass: Susy: - Layout file for a "magic" Susy grid.

_magic.scss

//-----------------------------------------------------------------------------
// Grid Settings

$total-columns  : 4;
$column-width   : 4.5em;
$gutter-width   : 1.5em;
$grid-padding   : $gutter-width;

//-----------------------------------------------------------------------------
// Responsive Variables

$min    : 40em;
$cols   : 12;
$ie     : lt-ie9;
$break  : $min $cols $ie;

//-----------------------------------------------------------------------------
// Container

.page {
  @include container($total-columns, $break);
}

// The above is a shortcut for:
//
// .page { 
//   @include container;
//   @include at-breakpoint($break) {
//     @include set-container-width;
//   }
// }
//
// You can also use "container" rather than "set-container-width",
// but the output will be less DRY.

//-----------------------------------------------------------------------------
// Structure

[role="banner"] {
  @include at-breakpoint($break) {
    @include prefix(3,12);
  }
}

[role="navigation"] {
  @include at-breakpoint($break) {
    @include span-columns(3,12);
  }
}

[role="main"] {
  @include at-breakpoint($break) {
    @include span-columns(9 omega,12);
    article { @include span-columns(6,9); }
    aside { @include span-columns(3 omega,9); }
  }
}

.gist { clear: both; }

[role="contentinfo"] {
  clear: both;
  margin: 0 0 - $grid-padding;
  padding: 0 $grid-padding;
  @include at-breakpoint($break) {
    margin: 0;
    @include pad(3,3,12);
  }
}

// In this case, I should be able to write:
//
// @include at-breakpoint($break) {
//   [role="banner"] {...}
//   [role="navigation"] {...}
//   [role="main"] {...}
// }
//
// But that is not currently possible in Sass, when an IE class is present.
// Without the IE class it works fine, and gives a more DRY output.
// This is a known bug in Sass, and should be fixed soon.