Generated by SassMeister.com.

SassMeister-input-HTML.html

<div id="container">
  <div id="sidebar">
    <h1>Left column</h1>
    <p>Intrinsicly integrate user-centric niche markets without enterprise core competencies. Efficiently extend magnetic ROI for leveraged initiatives. Proactively reconceptualize just in time catalysts for change without 24/7.</p>
  </div>
  <div id="content">
    <header><h1>Content</h1></header>
    <div id="product">
      <div id="photo">
        Photo Photo Photo Photo Photo Photo Photo Photo Photo Photo Photo Photo Photo Photo Photo 
      </div>
      <div id="description">
        Holisticly architect compelling e-markets without cutting-edge metrics.
      </div>
    </div>
    <div id="products">
      <div class="product c1">
        Product 1
      </div>
      <div class="product c2">
        Product 2
      </div>
      <div class="product c3">
        Product 3
      </div>
    </div>
  </div>
</div>

SassMeister-input.scss

// ----
// Sass (v3.2.19)
// Compass (v0.12.6)
// Breakpoint (v2.0.7)
// Singularity.gs (v1.1.2)
// ----

@import "compass";
@import "singularitygs";
@import "breakpoint";

$debug-grid: false !default;

@mixin grid-background {
  @if $debug-grid == true {
    @include background-grid;
  }
}

$include-clearfix: true;

// Set consistent vertical and horizontal spacing units.
$vert-spacing-unit: 18px;
$horz-spacing-unit: 1em;

$desk: 940px;
$grids: 240px 670px;
$gutters: 30px;
//$gutter-styles: 'fixed';

$debug-grid: true;

* {
  @include box-sizing('border-box');
}

#container {
  max-width: $desk;
  margin: auto;
  @include grid-background;
  @include clearfix;
}

#sidebar {
  @include grid-span(1, 1);
}

#content {
  @include grid-span(1, 2);
}

#product {
  @include grid-span(2, 1);
  @include layout($grid: 400px 240px, $gutter: 30px) {
    @include grid-background;
    #photo {
      @include grid-span(1, 1);
    }
    #description {
      @include grid-span(1, 2);
    }
  }
}

#products {
  @include grid-span(2, 1);
  @include layout($grid: 210px 210px 210px, $gutter: 20px) {
    @include grid-background;
    #photo {
      @include grid-span(1, 1);
    }
    #description {
      @include grid-span(1, 2);
    }
  }  
}

SassMeister-output.css

* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

#container {
  max-width: 940px;
  margin: auto;
  background-image: -webkit-gradient(linear, 0% 50%, 100% 50%, color-stop(0%, rgba(210, 105, 30, 0.5)), color-stop(25.53191%, rgba(210, 105, 30, 0.5)), color-stop(25.53191%, rgba(210, 105, 30, 0.25)), color-stop(28.7234%, rgba(210, 105, 30, 0.25)), color-stop(28.7234%, rgba(210, 105, 30, 0.5)), color-stop(100%, rgba(210, 105, 30, 0.5)), color-stop(100%, rgba(210, 105, 30, 0.25)), color-stop(103.19149%, rgba(210, 105, 30, 0.25)));
  background-image: -webkit-linear-gradient(left, rgba(210, 105, 30, 0.5), rgba(210, 105, 30, 0.5) 25.53191%, rgba(210, 105, 30, 0.25) 25.53191%, rgba(210, 105, 30, 0.25) 28.7234%, rgba(210, 105, 30, 0.5) 28.7234%, rgba(210, 105, 30, 0.5) 100%, rgba(210, 105, 30, 0.25) 100%, rgba(210, 105, 30, 0.25) 103.19149%);
  background-image: -moz-linear-gradient(left, rgba(210, 105, 30, 0.5), rgba(210, 105, 30, 0.5) 25.53191%, rgba(210, 105, 30, 0.25) 25.53191%, rgba(210, 105, 30, 0.25) 28.7234%, rgba(210, 105, 30, 0.5) 28.7234%, rgba(210, 105, 30, 0.5) 100%, rgba(210, 105, 30, 0.25) 100%, rgba(210, 105, 30, 0.25) 103.19149%);
  background-image: -o-linear-gradient(left, rgba(210, 105, 30, 0.5), rgba(210, 105, 30, 0.5) 25.53191%, rgba(210, 105, 30, 0.25) 25.53191%, rgba(210, 105, 30, 0.25) 28.7234%, rgba(210, 105, 30, 0.5) 28.7234%, rgba(210, 105, 30, 0.5) 100%, rgba(210, 105, 30, 0.25) 100%, rgba(210, 105, 30, 0.25) 103.19149%);
  background-image: linear-gradient(left, rgba(210, 105, 30, 0.5), rgba(210, 105, 30, 0.5) 25.53191%, rgba(210, 105, 30, 0.25) 25.53191%, rgba(210, 105, 30, 0.25) 28.7234%, rgba(210, 105, 30, 0.5) 28.7234%, rgba(210, 105, 30, 0.5) 100%, rgba(210, 105, 30, 0.25) 100%, rgba(210, 105, 30, 0.25) 103.19149%);
  /* for IE 6/7 */
  *zoom: expression(this.runtimeStyle.zoom="1", this.appendChild(document.createElement("br")).style.cssText="clear:both;font:0/0 serif");
  /* non-JS fallback */
  *zoom: 1;
}
#container:before, #container:after {
  content: ".";
  display: block;
  height: 0;
  overflow: hidden;
}
#container:after {
  clear: both;
}

#sidebar {
  width: 25.53191%;
  float: left;
  margin-right: -100%;
  margin-left: 0%;
  clear: none;
  /* for IE 6/7 */
  *zoom: expression(this.runtimeStyle.zoom="1", this.appendChild(document.createElement("br")).style.cssText="clear:both;font:0/0 serif");
  /* non-JS fallback */
  *zoom: 1;
}
#sidebar:before, #sidebar:after {
  content: ".";
  display: block;
  height: 0;
  overflow: hidden;
}
#sidebar:after {
  clear: both;
}

#content {
  width: 71.2766%;
  float: right;
  margin-left: 0;
  margin-right: 0;
  clear: none;
  /* for IE 6/7 */
  *zoom: expression(this.runtimeStyle.zoom="1", this.appendChild(document.createElement("br")).style.cssText="clear:both;font:0/0 serif");
  /* non-JS fallback */
  *zoom: 1;
}
#content:before, #content:after {
  content: ".";
  display: block;
  height: 0;
  overflow: hidden;
}
#content:after {
  clear: both;
}

#product {
  width: 100%;
  float: right;
  margin-left: 0;
  margin-right: 0;
  clear: none;
  /* for IE 6/7 */
  *zoom: expression(this.runtimeStyle.zoom="1", this.appendChild(document.createElement("br")).style.cssText="clear:both;font:0/0 serif");
  /* non-JS fallback */
  *zoom: 1;
  background-image: -webkit-gradient(linear, 0% 50%, 100% 50%, color-stop(0%, rgba(210, 105, 30, 0.5)), color-stop(59.70149%, rgba(210, 105, 30, 0.5)), color-stop(59.70149%, rgba(210, 105, 30, 0.25)), color-stop(64.1791%, rgba(210, 105, 30, 0.25)), color-stop(64.1791%, rgba(210, 105, 30, 0.5)), color-stop(100%, rgba(210, 105, 30, 0.5)), color-stop(100%, rgba(210, 105, 30, 0.25)), color-stop(104.47761%, rgba(210, 105, 30, 0.25)));
  background-image: -webkit-linear-gradient(left, rgba(210, 105, 30, 0.5), rgba(210, 105, 30, 0.5) 59.70149%, rgba(210, 105, 30, 0.25) 59.70149%, rgba(210, 105, 30, 0.25) 64.1791%, rgba(210, 105, 30, 0.5) 64.1791%, rgba(210, 105, 30, 0.5) 100%, rgba(210, 105, 30, 0.25) 100%, rgba(210, 105, 30, 0.25) 104.47761%);
  background-image: -moz-linear-gradient(left, rgba(210, 105, 30, 0.5), rgba(210, 105, 30, 0.5) 59.70149%, rgba(210, 105, 30, 0.25) 59.70149%, rgba(210, 105, 30, 0.25) 64.1791%, rgba(210, 105, 30, 0.5) 64.1791%, rgba(210, 105, 30, 0.5) 100%, rgba(210, 105, 30, 0.25) 100%, rgba(210, 105, 30, 0.25) 104.47761%);
  background-image: -o-linear-gradient(left, rgba(210, 105, 30, 0.5), rgba(210, 105, 30, 0.5) 59.70149%, rgba(210, 105, 30, 0.25) 59.70149%, rgba(210, 105, 30, 0.25) 64.1791%, rgba(210, 105, 30, 0.5) 64.1791%, rgba(210, 105, 30, 0.5) 100%, rgba(210, 105, 30, 0.25) 100%, rgba(210, 105, 30, 0.25) 104.47761%);
  background-image: linear-gradient(left, rgba(210, 105, 30, 0.5), rgba(210, 105, 30, 0.5) 59.70149%, rgba(210, 105, 30, 0.25) 59.70149%, rgba(210, 105, 30, 0.25) 64.1791%, rgba(210, 105, 30, 0.5) 64.1791%, rgba(210, 105, 30, 0.5) 100%, rgba(210, 105, 30, 0.25) 100%, rgba(210, 105, 30, 0.25) 104.47761%);
}
#product:before, #product:after {
  content: ".";
  display: block;
  height: 0;
  overflow: hidden;
}
#product:after {
  clear: both;
}
#product #photo {
  width: 59.70149%;
  float: left;
  margin-right: -100%;
  margin-left: 0%;
  clear: none;
  /* for IE 6/7 */
  *zoom: expression(this.runtimeStyle.zoom="1", this.appendChild(document.createElement("br")).style.cssText="clear:both;font:0/0 serif");
  /* non-JS fallback */
  *zoom: 1;
}
#product #photo:before, #product #photo:after {
  content: ".";
  display: block;
  height: 0;
  overflow: hidden;
}
#product #photo:after {
  clear: both;
}
#product #description {
  width: 35.8209%;
  float: right;
  margin-left: 0;
  margin-right: 0;
  clear: none;
  /* for IE 6/7 */
  *zoom: expression(this.runtimeStyle.zoom="1", this.appendChild(document.createElement("br")).style.cssText="clear:both;font:0/0 serif");
  /* non-JS fallback */
  *zoom: 1;
}
#product #description:before, #product #description:after {
  content: ".";
  display: block;
  height: 0;
  overflow: hidden;
}
#product #description:after {
  clear: both;
}

#products {
  width: 100%;
  float: right;
  margin-left: 0;
  margin-right: 0;
  clear: none;
  /* for IE 6/7 */
  *zoom: expression(this.runtimeStyle.zoom="1", this.appendChild(document.createElement("br")).style.cssText="clear:both;font:0/0 serif");
  /* non-JS fallback */
  *zoom: 1;
  background-image: -webkit-gradient(linear, 0% 50%, 100% 50%, color-stop(0%, rgba(210, 105, 30, 0.5)), color-stop(31.34328%, rgba(210, 105, 30, 0.5)), color-stop(31.34328%, rgba(210, 105, 30, 0.25)), color-stop(34.32836%, rgba(210, 105, 30, 0.25)), color-stop(34.32836%, rgba(210, 105, 30, 0.5)), color-stop(65.67164%, rgba(210, 105, 30, 0.5)), color-stop(65.67164%, rgba(210, 105, 30, 0.25)), color-stop(68.65672%, rgba(210, 105, 30, 0.25)), color-stop(68.65672%, rgba(210, 105, 30, 0.5)), color-stop(100%, rgba(210, 105, 30, 0.5)), color-stop(100%, rgba(210, 105, 30, 0.25)), color-stop(102.98507%, rgba(210, 105, 30, 0.25)));
  background-image: -webkit-linear-gradient(left, rgba(210, 105, 30, 0.5), rgba(210, 105, 30, 0.5) 31.34328%, rgba(210, 105, 30, 0.25) 31.34328%, rgba(210, 105, 30, 0.25) 34.32836%, rgba(210, 105, 30, 0.5) 34.32836%, rgba(210, 105, 30, 0.5) 65.67164%, rgba(210, 105, 30, 0.25) 65.67164%, rgba(210, 105, 30, 0.25) 68.65672%, rgba(210, 105, 30, 0.5) 68.65672%, rgba(210, 105, 30, 0.5) 100%, rgba(210, 105, 30, 0.25) 100%, rgba(210, 105, 30, 0.25) 102.98507%);
  background-image: -moz-linear-gradient(left, rgba(210, 105, 30, 0.5), rgba(210, 105, 30, 0.5) 31.34328%, rgba(210, 105, 30, 0.25) 31.34328%, rgba(210, 105, 30, 0.25) 34.32836%, rgba(210, 105, 30, 0.5) 34.32836%, rgba(210, 105, 30, 0.5) 65.67164%, rgba(210, 105, 30, 0.25) 65.67164%, rgba(210, 105, 30, 0.25) 68.65672%, rgba(210, 105, 30, 0.5) 68.65672%, rgba(210, 105, 30, 0.5) 100%, rgba(210, 105, 30, 0.25) 100%, rgba(210, 105, 30, 0.25) 102.98507%);
  background-image: -o-linear-gradient(left, rgba(210, 105, 30, 0.5), rgba(210, 105, 30, 0.5) 31.34328%, rgba(210, 105, 30, 0.25) 31.34328%, rgba(210, 105, 30, 0.25) 34.32836%, rgba(210, 105, 30, 0.5) 34.32836%, rgba(210, 105, 30, 0.5) 65.67164%, rgba(210, 105, 30, 0.25) 65.67164%, rgba(210, 105, 30, 0.25) 68.65672%, rgba(210, 105, 30, 0.5) 68.65672%, rgba(210, 105, 30, 0.5) 100%, rgba(210, 105, 30, 0.25) 100%, rgba(210, 105, 30, 0.25) 102.98507%);
  background-image: linear-gradient(left, rgba(210, 105, 30, 0.5), rgba(210, 105, 30, 0.5) 31.34328%, rgba(210, 105, 30, 0.25) 31.34328%, rgba(210, 105, 30, 0.25) 34.32836%, rgba(210, 105, 30, 0.5) 34.32836%, rgba(210, 105, 30, 0.5) 65.67164%, rgba(210, 105, 30, 0.25) 65.67164%, rgba(210, 105, 30, 0.25) 68.65672%, rgba(210, 105, 30, 0.5) 68.65672%, rgba(210, 105, 30, 0.5) 100%, rgba(210, 105, 30, 0.25) 100%, rgba(210, 105, 30, 0.25) 102.98507%);
}
#products:before, #products:after {
  content: ".";
  display: block;
  height: 0;
  overflow: hidden;
}
#products:after {
  clear: both;
}
#products #photo {
  width: 31.34328%;
  float: left;
  margin-right: -100%;
  margin-left: 0%;
  clear: none;
  /* for IE 6/7 */
  *zoom: expression(this.runtimeStyle.zoom="1", this.appendChild(document.createElement("br")).style.cssText="clear:both;font:0/0 serif");
  /* non-JS fallback */
  *zoom: 1;
}
#products #photo:before, #products #photo:after {
  content: ".";
  display: block;
  height: 0;
  overflow: hidden;
}
#products #photo:after {
  clear: both;
}
#products #description {
  width: 31.34328%;
  float: left;
  margin-right: -100%;
  margin-left: 34.32836%;
  clear: none;
  /* for IE 6/7 */
  *zoom: expression(this.runtimeStyle.zoom="1", this.appendChild(document.createElement("br")).style.cssText="clear:both;font:0/0 serif");
  /* non-JS fallback */
  *zoom: 1;
}
#products #description:before, #products #description:after {
  content: ".";
  display: block;
  height: 0;
  overflow: hidden;
}
#products #description:after {
  clear: both;
}

SassMeister-rendered.html

<div id="container">
  <div id="sidebar">
    <h1>Left column</h1>
    <p>Intrinsicly integrate user-centric niche markets without enterprise core competencies. Efficiently extend magnetic ROI for leveraged initiatives. Proactively reconceptualize just in time catalysts for change without 24/7.</p>
  </div>
  <div id="content">
    <header><h1>Content</h1></header>
    <div id="product">
      <div id="photo">
        Photo Photo Photo Photo Photo Photo Photo Photo Photo Photo Photo Photo Photo Photo Photo 
      </div>
      <div id="description">
        Holisticly architect compelling e-markets without cutting-edge metrics.
      </div>
    </div>
    <div id="products">
      <div class="product c1">
        Product 1
      </div>
      <div class="product c2">
        Product 2
      </div>
      <div class="product c3">
        Product 3
      </div>
    </div>
  </div>
</div>