Generated by SassMeister.com.

SassMeister-input-HTML.haml

#page
  #foo.container
    .subcontainer
      .column Foo
      .column Foo
      .column Foo
      .column Foo
    .subcontainer
      .column Bar
      .column Bar
      .column Bar
      .column Bar
    
  #bar.container
    .column Baz
    .column Quux

SassMeister-input.sass

// ----
// Sass (v3.3.0.rc.1)
// Compass (v0.13.alpha.10)
// ----

@import compass
@import singularitygs



///////////////////////////
// Layout
///////////////////////////

*, *:before, *:after
  +box-sizing(border-box)

$grids: 12
$gutters: 0.2

#foo
  .subcontainer
    +float-span(6)
    &:nth-child(2n)
      +float-span(6, last)
  .column
    +layout(6)
      +float-span(3)
      &:nth-child(2n)
        +float-span(3, last)

#bar
  .column
    +float-span(6)
    &:nth-child(2n)
      +float-span(6, last) 

///////////////////////////
// Looks
///////////////////////////

.container
  margin-bottom: 2em
  +pie-clearfix
  
.subcontainer
  +pie-clearfix
  background-color: lightblue
  
.column
  background-color: pink
  min-height: 3em
  margin-top: 0.5em
  margin-bottom: 0.5em

SassMeister-output.css

*, *:before, *:after {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box; }

#foo .subcontainer {
  width: 49.29577%;
  clear: right;
  float: left;
  margin-left: 0;
  margin-right: 1.40845%; }
  #foo .subcontainer:nth-child(2n) {
    width: 49.29577%;
    clear: right;
    float: right;
    margin-right: 0; }
#foo .column {
  width: 48.57143%;
  clear: right;
  float: left;
  margin-left: 0;
  margin-right: 2.85714%; }
  #foo .column:nth-child(2n) {
    width: 48.57143%;
    clear: right;
    float: right;
    margin-right: 0; }

#bar .column {
  width: 49.29577%;
  clear: right;
  float: left;
  margin-left: 0;
  margin-right: 1.40845%; }
  #bar .column:nth-child(2n) {
    width: 49.29577%;
    clear: right;
    float: right;
    margin-right: 0; }

.container {
  margin-bottom: 2em;
  *zoom: 1; }
  .container:after {
    content: "";
    display: table;
    clear: both; }

.subcontainer {
  *zoom: 1;
  background-color: lightblue; }
  .subcontainer:after {
    content: "";
    display: table;
    clear: both; }

.column {
  background-color: pink;
  min-height: 3em;
  margin-top: 0.5em;
  margin-bottom: 0.5em; }

SassMeister-rendered.html

<div id='page'>
  <div class='container' id='foo'>
    <div class='subcontainer'>
      <div class='column'>Foo</div>
      <div class='column'>Foo</div>
      <div class='column'>Foo</div>
      <div class='column'>Foo</div>
    </div>
    <div class='subcontainer'>
      <div class='column'>Bar</div>
      <div class='column'>Bar</div>
      <div class='column'>Bar</div>
      <div class='column'>Bar</div>
    </div>
  </div>
  <div class='container' id='bar'>
    <div class='column'>Baz</div>
    <div class='column'>Quux</div>
  </div>
</div>