Generated by SassMeister.com.

SassMeister-input-HTML.html

<header>
	<div class="layout-wrap">
		Header
		<div class="branding"></div>
		<nav></nav>
	</div>
</header>
<div id="main-content">
	<div class="layout-wrap">
		<div class="unit-full clearfix">
		  <article class="clearfix">
		    <h3>Collaboratively administrate empowered markets via plug-and-play networks.</h3>
		    <div class="post-meta">
		      "Don't be afraid, my butter-boxes," cried Stubb,
		    </div>
		    <div class="article-content">
		      <p>"Don't be afraid, my butter-boxes," cried Stubb, casting a passing glance upon them as he shot by; "ye'll be picked up presently&mdash;all right&mdash;I saw some sharks astern&mdash;St. Bernard's dogs, you know&mdash;relieve distressed travellers. Hurrah! this is the way to sail now. Every keel a sunbeam! Hurrah!&mdash;Here we go like three tin kettles at the tail of a mad cougar! This puts me in mind of fastening to an elephant in a tilbury on a plain&mdash;makes the wheel-spokes fly, boys, when you fasten to him that way; and there's danger of being pitched out too, when you strike a hill.</p>
		    </div>
		  </article>
		  
		  <div class="unit-8full clearfix">
		    Unit 8full
		  </div>
		  
		</div>
	</div>
</div>
<footer>
	<nav class="layout-wrap"></nav>
	
	<section class="layout-wrap">
		Footer Text
	</section>
</footer>

SassMeister-input.scss

// ----
// Sass (v3.3.8)
// Compass (v1.0.0.alpha.19)
// Breakpoint (v2.4.2)
// Susy (v2.1.2)
// ----

@import "compass";
@import "breakpoint";
@import "susy";


$bp-desktop: 960px;

// Visuals
body {
	padding: 0;
	margin: 0;
}

.clearfix{
  &:after {
  display: block;
  clear: both;
  content: "";
  }
}

nav, header, article, footer, section, aside, .mod {
  padding-top: 1em;
  padding-bottom: 1em;
  background: linear-gradient(rgba(orange,.125), rgba(orange,.125)), rgba(orange, .25);
  background-clip: content-box, border-box;
  box-shadow: inset 0 0 0 1px rgba(orange, .9);
}

@include border-box-sizing;

$susy: (
  columns: 12,
  gutters: 1/4,
  math: fluid,
  output: float,
  gutter-position: inside,
  debug: (
    image: show,
    color: rgba(blue, .25),
    toggle: top right,
  ),
);

$layout-desktop: (
  container:960px,
	columns: 12,
	gutters: .25,
	gutter-position: inside-static,
	math: fluid,
);

.layout-wrap {
	@include container(4 .1 show);
	@include breakpoint($bp-desktop) {
		@include container(layout($layout-desktop) show);
	}
}

%three-up {
  font-weight:bold;
}

@include breakpoint($bp-desktop) {
  .unit-full{
    @include span(8 of 12);
    @include pre(2 of 12);
  }
  
  article {
    position: relative;
  }
  
  h3 {
    margin-top:0;
    // @include span(8 of 10 last);
  }
  
  .post-meta {
    background: green;
    width: span(2 of 8);
    position:absolute;
    left: -(span(2 of 8 wide));
    top: 0 ;
  }
  
  .article-content {
    position: relative;
    // @include span(8 of 10 last);
  }
  
  .unit-8full {
    @include span(8 of 8);
    background:red;
    
  }
  
  


}

SassMeister-output.css

body {
  padding: 0;
  margin: 0;
}

.clearfix:after {
  display: block;
  clear: both;
  content: "";
}

nav, header, article, footer, section, aside, .mod {
  padding-top: 1em;
  padding-bottom: 1em;
  background: linear-gradient(rgba(255, 165, 0, 0.125), rgba(255, 165, 0, 0.125)), rgba(255, 165, 0, 0.25);
  background-clip: content-box, border-box;
  box-shadow: inset 0 0 0 1px rgba(255, 165, 0, 0.9);
}

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

.layout-wrap {
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
  background-image: -moz-linear-gradient(left, rgba(0, 0, 255, 0.25), rgba(77, 77, 255, 0.25)), -moz-linear-gradient(top, rgba(0, 0, 0, 0.5) 5%, rgba(0, 0, 0, 0) 5%);
  background-image: -webkit-linear-gradient(left, rgba(0, 0, 255, 0.25), rgba(77, 77, 255, 0.25)), -webkit-linear-gradient(top, rgba(0, 0, 0, 0.5) 5%, rgba(0, 0, 0, 0) 5%);
  background-image: linear-gradient(to right, rgba(0, 0, 255, 0.25), rgba(77, 77, 255, 0.25)), linear-gradient(to bottom, rgba(0, 0, 0, 0.5) 5%, rgba(0, 0, 0, 0) 5%);
  background-size: 25%, 100% 24px;
  background-origin: content-box, border-box;
  background-clip: content-box, border-box;
  background-position: left top;
}
.layout-wrap:after {
  content: " ";
  display: block;
  clear: both;
}
@media (min-width: 960px) {
  .layout-wrap {
    max-width: 960px;
    margin-left: auto;
    margin-right: auto;
    background-image: -moz-linear-gradient(left, rgba(0, 0, 255, 0.25), rgba(77, 77, 255, 0.25)), -moz-linear-gradient(top, rgba(0, 0, 0, 0.5) 5%, rgba(0, 0, 0, 0) 5%);
    background-image: -webkit-linear-gradient(left, rgba(0, 0, 255, 0.25), rgba(77, 77, 255, 0.25)), -webkit-linear-gradient(top, rgba(0, 0, 0, 0.5) 5%, rgba(0, 0, 0, 0) 5%);
    background-image: linear-gradient(to right, rgba(0, 0, 255, 0.25), rgba(77, 77, 255, 0.25)), linear-gradient(to bottom, rgba(0, 0, 0, 0.5) 5%, rgba(0, 0, 0, 0) 5%);
    background-size: 8.33333%, 100% 24px;
    background-origin: content-box, border-box;
    background-clip: content-box, border-box;
    background-position: left top;
  }
  .layout-wrap:after {
    content: " ";
    display: block;
    clear: both;
  }
}

@media (min-width: 960px) {
  .unit-full {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    width: 66.66667%;
    float: left;
    padding-left: 0.83333%;
    padding-right: 0.83333%;
    margin-left: 16.66667%;
  }

  article {
    position: relative;
  }

  h3 {
    margin-top: 0;
  }

  .post-meta {
    background: green;
    width: 25%;
    position: absolute;
    left: -25%;
    top: 0;
  }

  .article-content {
    position: relative;
  }

  .unit-8full {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    width: 100%;
    float: left;
    padding-left: 1.25%;
    padding-right: 1.25%;
    background: red;
  }
}

SassMeister-rendered.html

<header>
	<div class="layout-wrap">
		Header
		<div class="branding"></div>
		<nav></nav>
	</div>
</header>
<div id="main-content">
	<div class="layout-wrap">
		<div class="unit-full clearfix">
		  <article class="clearfix">
		    <h3>Collaboratively administrate empowered markets via plug-and-play networks.</h3>
		    <div class="post-meta">
		      "Don't be afraid, my butter-boxes," cried Stubb,
		    </div>
		    <div class="article-content">
		      <p>"Don't be afraid, my butter-boxes," cried Stubb, casting a passing glance upon them as he shot by; "ye'll be picked up presently&mdash;all right&mdash;I saw some sharks astern&mdash;St. Bernard's dogs, you know&mdash;relieve distressed travellers. Hurrah! this is the way to sail now. Every keel a sunbeam! Hurrah!&mdash;Here we go like three tin kettles at the tail of a mad cougar! This puts me in mind of fastening to an elephant in a tilbury on a plain&mdash;makes the wheel-spokes fly, boys, when you fasten to him that way; and there's danger of being pitched out too, when you strike a hill.</p>
		    </div>
		  </article>
		  
		  <div class="unit-8full clearfix">
		    Unit 8full
		  </div>
		  
		</div>
	</div>
</div>
<footer>
	<nav class="layout-wrap"></nav>
	
	<section class="layout-wrap">
		Footer Text
	</section>
</footer>