Generated by SassMeister.com.

SassMeister-input-HTML.html

<header>
  <div class="layout-wrap">
    <div class="branding">
      
    </div>
    <nav class="utility"></nav>
    <nav id="primary-nav"></nav>
  </div>
</header>
<div class="main-content">
  <div class="module module--promo">
    <h1>Promo</h1>
  </div>
   <div class="module module--feature-items">
     <div class="layout-wrap">
       <h2>Feature Items</h2>
    </div>
  </div>
   <div class="module module--features">
     <div class="layout-wrap">
       <h2>Features</h2>
  </div>
  </div>
  
  <div class="layout-wrap">
  </div>
</div>

SassMeister-input.scss

// ----
// Sass (v3.3.5)
// Compass (v)
// Breakpoint (v)
// Susy (v)
// ----

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

//Breakpoints
$bp-small: 400px;
$bp-tablet: 768px;
$bp-desktop: 960px;



// .369230769
$susy: (
  debug: (
    image: show,
    color: rgba(blue, .25),
  ),
);



$grid-mobile-small:(
	container:auto,
	columns: 4,
	gutters: .25,
	gutter-position: inside,
	math: fluid,
);

$grid-desktop:(
  container:62.5em,
	columns: 12,
	gutters: .369230769,
	gutter-position: after,
	math: fluid,
);

.layout-wrap {
	@include container(layout($grid-mobile-small));
	@include breakpoint($bp-desktop) {
		@include container(layout($grid-desktop) show);
	}
}


nav, header, article, footer, section, aside, .module {
  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);
}

SassMeister-output.css

.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: 62.5em;
    margin-left: auto;
    margin-right: auto;
    background-image: -moz-linear-gradient(left, rgba(0, 0, 255, 0.25), rgba(77, 77, 255, 0.25) 73.03371%, rgba(0, 0, 0, 0) 73.03371%), -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) 73.03371%, rgba(0, 0, 0, 0) 73.03371%), -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) 73.03371%, rgba(0, 0, 0, 0) 73.03371%), linear-gradient(to bottom, rgba(0, 0, 0, 0.5) 5%, rgba(0, 0, 0, 0) 5%);
    background-size: 8.5249%, 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;
  }
}

nav, header, article, footer, section, aside, .module {
  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);
}

SassMeister-rendered.html

<header>
  <div class="layout-wrap">
    <div class="branding">
      
    </div>
    <nav class="utility"></nav>
    <nav id="primary-nav"></nav>
  </div>
</header>
<div class="main-content">
  <div class="module module--promo">
    <h1>Promo</h1>
  </div>
   <div class="module module--feature-items">
     <div class="layout-wrap">
       <h2>Feature Items</h2>
    </div>
  </div>
   <div class="module module--features">
     <div class="layout-wrap">
       <h2>Features</h2>
  </div>
  </div>
  
  <div class="layout-wrap">
  </div>
</div>