Generated by SassMeister.com.

SassMeister-input-HTML.html

<header id="siteHeader" class="defaultHead">
  Header
</header>

<div id="siteContainer">
  <div id="siteContent">
    <section id="upperMainColumn" role="main" class="contentWell">
      UpperMain
      
      <p> Llama ipsum dolor sit amet consectetur alpaca elit, nam mattis risus sit amet tellus, posuere vel pronking diam adipiscing nullam. Semper bibendum nisi in humming llambada vivamus vel purus eu ipsum, kush placerat curabitur ullamcorper metus vel ipsum tempor feugiat. Eget quis mi vivamus at turpis lama glama a lobortis, nunc nunc sodales accumsan orci a tristique ut, eu interdum odio in hac habitasse platea dictumst. nam scelerisque here a llama yearling there a llama humming, massa sit amet auctor velit and another little llama morbi quis, yearling diam ut nisi urna fringilla rhoncus malesuada at.

Egestas pretium nibh phasellus eget lobortis llama llama duck, in posuere porta lobortis etiam vel accumsan, nunc nam pronking tempor metus non facilisis. Suspendisse eu nibh nec nibh placerat gravida ac sit amet urna suspendisse, potenti drama llama maecenas quam enim llamasutra pellentesque id venenatis sit, amet suscipit a nulla aliquam sodales llama llama sed. Pretium fringilla nisi eu aliquet nisi convallis cria vel, nunc vehicula porta ligula in iaculis erat auctor, eu vivamus pajama llama dam leo pretium. Quis fringilla sit amet blandit at ipsum vivamus dignissim turpis at feugiat, cursus orci elit llama yo mama interdum diam eget. </p>
    </section>
    <aside id="upperRightColumn">upper right. Must be 300px wide</aside>
    <section id="mainColumn">Lower Main</section>
    <aside id="rightColumn">Lower Right</aside>
  </div>
</div>

<footer id="siteFooter">Footer</footer>

SassMeister-input.scss

// ----
// Sass (v3.4.11)
// Compass (v1.0.3)
// Zen Grids (v1.4)
// ----

@import "zen";

$zen-column-count: 9;
$zen-gutter-width: 10px;

$masonrySingleItemWidth: 300px; // 1 card is the default
$masonrySmallBreakPoint: 647px;
$masonryNarrow: 'screen and (min-width: #{$masonrySmallBreakPoint})'; // 2 cards
$masonryMedium: 'screen and (min-width: 965px)'; // 3 cards
$masonryWide: 'screen and (min-width: 1280px)';  // 4 cards
$masonryNarrowWidth: 615px;
$masonryMediumWidth: 930px;
$masonryWideWidth: 1245px;

#siteHeader, #siteFooter {
  height: 50px;
  width: 100%;
  background: blue;
}
#siteFooter {
  background: yellow;
}
#upperMainColumn {
  background: pink;
}
#upperRightColumn {
  background: orange;
}
#mainColumn {
  background: green;
}
#rightColumn {
  background: purple;
}

#siteContent {
  max-width: 1030px;
  margin: 0 auto;
  @include zen-grid-container();
}

@media #{$masonryMedium} {
  #upperMainColumn, #mainColumn {
    @include zen-grid-item( 6, 1 );
  }
  #mainColumn {
    @include zen-clear(both);
  }
  #upperRightColumn, #rightColumn {
    @include zen-grid-item( 3, 1, right );
    width: 300px;
  }
}

SassMeister-output.css

#siteHeader, #siteFooter {
  height: 50px;
  width: 100%;
  background: blue;
}

#siteFooter {
  background: yellow;
}

#upperMainColumn {
  background: pink;
}

#upperRightColumn {
  background: orange;
}

#mainColumn {
  background: green;
}

#rightColumn {
  background: purple;
}

#siteContent {
  max-width: 1030px;
  margin: 0 auto;
}
#siteContent:before, #siteContent:after {
  content: "";
  display: table;
}
#siteContent:after {
  clear: both;
}

@media screen and (min-width: 965px) {
  #upperMainColumn, #mainColumn {
    float: left;
    width: 66.66667%;
    margin-left: 0%;
    margin-right: -66.66667%;
    padding-left: 5px;
    padding-right: 5px;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
    word-wrap: break-word;
  }

  #mainColumn {
    clear: both;
  }

  #upperRightColumn, #rightColumn {
    float: right;
    width: 33.33333%;
    margin-right: 0%;
    margin-left: -33.33333%;
    padding-left: 5px;
    padding-right: 5px;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
    word-wrap: break-word;
    width: 300px;
  }
}

SassMeister-rendered.html

<header id="siteHeader" class="defaultHead">
  Header
</header>

<div id="siteContainer">
  <div id="siteContent">
    <section id="upperMainColumn" role="main" class="contentWell">
      UpperMain
      
      <p> Llama ipsum dolor sit amet consectetur alpaca elit, nam mattis risus sit amet tellus, posuere vel pronking diam adipiscing nullam. Semper bibendum nisi in humming llambada vivamus vel purus eu ipsum, kush placerat curabitur ullamcorper metus vel ipsum tempor feugiat. Eget quis mi vivamus at turpis lama glama a lobortis, nunc nunc sodales accumsan orci a tristique ut, eu interdum odio in hac habitasse platea dictumst. nam scelerisque here a llama yearling there a llama humming, massa sit amet auctor velit and another little llama morbi quis, yearling diam ut nisi urna fringilla rhoncus malesuada at.

Egestas pretium nibh phasellus eget lobortis llama llama duck, in posuere porta lobortis etiam vel accumsan, nunc nam pronking tempor metus non facilisis. Suspendisse eu nibh nec nibh placerat gravida ac sit amet urna suspendisse, potenti drama llama maecenas quam enim llamasutra pellentesque id venenatis sit, amet suscipit a nulla aliquam sodales llama llama sed. Pretium fringilla nisi eu aliquet nisi convallis cria vel, nunc vehicula porta ligula in iaculis erat auctor, eu vivamus pajama llama dam leo pretium. Quis fringilla sit amet blandit at ipsum vivamus dignissim turpis at feugiat, cursus orci elit llama yo mama interdum diam eget. </p>
    </section>
    <aside id="upperRightColumn">upper right. Must be 300px wide</aside>
    <section id="mainColumn">Lower Main</section>
    <aside id="rightColumn">Lower Right</aside>
  </div>
</div>

<footer id="siteFooter">Footer</footer>