Susy multiple containers demo

multi.scss

$total-columns: 6;
$column-width: 4em;
$gutter-width: 1em;
$grid-padding: $gutter-width;

// The default container
.container1 { @include container(); }


// A container with a 12 columns instead
@include layout(12) {
  .container2 { @include container(); }
  // include any other code that should use this grid...
}

// For a container with completely new settings
// simply override the initial variables:
$total-columns: 24;
$column-width: 2em;
$gutter-width: .5em;
$grid-padding: 0em;

// A container with a completely different grid
.container3 { @include container(); }

// With this solution, you just have to be careful 
// that the correct variable values are being used for each block of code. 
// You can simplify by making a mixin to handle it:

@mixin grid-settings(
  $cols: $total-columns,
  $width: $column-width,
  $gutter: $gutter-width,
  $padding: $grid-padding
){
  // keep the defaults around
  $default-cols: $total-columns;
  $default-width: $column-width;
  $default-gutter: $gutter-width;
  $default-padding: $grid-padding;

  // use the new settings
  $total-columns: $cols;
  $column-width: $width;
  $gutter-width: $gutter;
  $grid-padding: $padding;

  // apply to contents
  @content;

  // re-instate the defaults
  $total-columns: $default-cols;
  $column-width: $default-width;
  $gutter-width: $default-gutter;
  $grid-padding: $default-padding;
}

// Now you can use it like this:
@include grid-settings(12,3em,1.5em,1em) {
  .container4 { @include container(); }
  // include any other code that should use this grid...
}

// hmmmm... that might be worth adding to the core...

Ran across this too.

On http://getclank.com/ the demos page had to be liquid but the others magic.

I solved it this way https://gist.github.com/Wolfr/5788239