Primary HAML Layout File

2_layout.css.scss

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

$break          : 12;

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

@include at-breakpoint($break) {
  .container {
    section[role="main"] {
      @include span-columns(7, 12);
    }
    section[role="secondary"] {
      @include span-columns(4 omega, 12);
    }
  }
}

layout.haml

...

%section{:class => "container main"}
      
  %section{:role => "main"}= yield
      
  -if current_page.data.secondary_content
    %section{:role => "secondary"}= partial "#{'partials/_' + current_page.data.secondary_content}"

...

This will always give you a 7-column "main" with space for a 4-column "secondary" whenever it is present. If you want main to take up all 12 columns when secondary is absent, you'll need a bit more. Unfortunately that little bit has to be in the markup (whether or not you are using Susy). You need to let main know if secondary is there or not. You can either do that by adding a class somewhere:

[role="main"].has-secondary {
  @include span-columns(7, 12);
}

or by placing secondary first in the markup:

[role="secondary"] + [role="main"] {
  @include span-columns(7, 12);
}

(best practice these days is also to simplify selectors as mush as possible, removing tags (section, etc) whenever you can).