Generated by SassMeister.com.

SassMeister-input-HTML.html

<div class="header1 full-stripe">
  <div class="logo full-stripe">
    <div class="container darker">
      <div class="darker">
       <img src="http://lorempixel.com/output/abstract-q-c-200-180-2.jpg"/>
      </div>
     </div>
  </div>
  <div class="header-text container darker">
    <div class="darker">This is the top header</div>
  </div>
</div>
<div class="header2 full-stripe">
  <div class="header-text container darker">
    <div class=" darker">This is bottom header</div>
  </div>
</div>
<div class="menu full-stripe">
  <div class="container darker">
  This is the menu
  </div>
</div>
<main class="container overlay">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur malesuada nunc magna, eu placerat nunc rhoncus non. Pellentesque vel est tincidunt, commodo risus ut, ullamcorper libero. Donec nec pharetra sapien, id sollicitudin turpis. Curabitur molestie tempus tellus, viverra molestie massa accumsan quis. Fusce tempor risus a sollicitudin dignissim. Morbi fermentum rhoncus lectus. Sed euismod mi vitae leo aliquam condimentum. Vivamus pellentesque in est eu gravida. Sed consequat nisi vel arcu imperdiet rutrum.
</main>

SassMeister-input.scss

// ----
// Sass (v3.4.12)
// Compass (v1.0.3)
// Singularity.gs (v1.5.1)
// ----

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

//Turn on Debug mode
$singularity: (
        'debug': 'true'
);
$grids: 12;
$gutters: 1/3;
$tablet: 44em;

.full-stripe
{
  width: 100%;
  @include clearfix;
}

.container {
  margin: 0 auto;
  padding: 0;
  max-width: $tablet;
  @include clearfix;
}

.darker { 
 background: rgba(black, .20);
 color: white;
}

.grid-3-1
{
  @include grid-span(3,1);
}

.grid-9-4
{
  @include grid-span(9,4);
}

.header1 {
  //uncomment out to visualize grid

  //@include background-grid($color: grey);
  background: blue;
  height: 90px;
  overflow: visible;
  .logo{
    @include grid-span(2,4);
  }
  .header-text{
    @include grid-span(4,6);
  }
}

.header2 {
  background: red;
  //uncomment out to visualize grid
  //@include background-grid($color: grey);

  height: 90px;
  
    .header-text{
    @include grid-span(4,6);
  }
}

.menu {
  background: green;
  height: 50px;
}

SassMeister-output.css

.full-stripe {
  width: 100%;
  overflow: hidden;
  *zoom: 1;
}

.container {
  margin: 0 auto;
  padding: 0;
  max-width: 44em;
  overflow: hidden;
  *zoom: 1;
}

.darker {
  background: rgba(0, 0, 0, 0.2);
  color: white;
}

.grid-3-1 {
  -sgs-span-settings: ("span": 3, "location": 1, "grid": 12, "gutter": 0.25, "style": "opposite", "start row": true, "end row": false, "fixed gutter": false, "split gutter": null, "gutter property": "margin", "options": (null: null));
  width: 23.72881%;
  float: left;
  margin-right: -100%;
  margin-left: 0;
  clear: none;
}

.grid-9-4 {
  -sgs-span-settings: ("span": 9, "location": 4, "grid": 12, "gutter": 0.25, "style": "opposite", "start row": false, "end row": true, "fixed gutter": false, "split gutter": null, "gutter property": "margin", "options": (null: null));
  width: 74.57627%;
  float: right;
  margin-left: 0;
  margin-right: 0;
  clear: none;
}

.header1 {
  background-image: linear-gradient(to right, grey 0%, grey 6.77966%, #9f9f9f 6.77966%, #9f9f9f 8.47458%, grey 8.47458%, grey 15.25424%, #9f9f9f 15.25424%, #9f9f9f 16.94915%, grey 16.94915%, grey 23.72881%, #9f9f9f 23.72881%, #9f9f9f 25.42373%, grey 25.42373%, grey 32.20339%, #9f9f9f 32.20339%, #9f9f9f 33.89831%, grey 33.89831%, grey 40.67797%, #9f9f9f 40.67797%, #9f9f9f 42.37288%, grey 42.37288%, grey 49.15254%, #9f9f9f 49.15254%, #9f9f9f 50.84746%, grey 50.84746%, grey 57.62712%, #9f9f9f 57.62712%, #9f9f9f 59.32203%, grey 59.32203%, grey 66.10169%, #9f9f9f 66.10169%, #9f9f9f 67.79661%, grey 67.79661%, grey 74.57627%, #9f9f9f 74.57627%, #9f9f9f 76.27119%, grey 76.27119%, grey 83.05085%, #9f9f9f 83.05085%, #9f9f9f 84.74576%, grey 84.74576%, grey 91.52542%, #9f9f9f 91.52542%, #9f9f9f 93.22034%, grey 93.22034%, grey);
  background: blue;
  height: 90px;
  overflow: visible;
}
.header1 .logo {
  -sgs-span-settings: ("span": 2, "location": 4, "grid": 12, "gutter": 0.25, "style": "opposite", "start row": false, "end row": false, "fixed gutter": false, "split gutter": null, "gutter property": "margin", "options": (null: null));
  width: 15.25424%;
  float: left;
  margin-right: -100%;
  margin-left: 25.42373%;
  clear: none;
}
.header1 .header-text {
  -sgs-span-settings: ("span": 4, "location": 6, "grid": 12, "gutter": 0.25, "style": "opposite", "start row": false, "end row": false, "fixed gutter": false, "split gutter": null, "gutter property": "margin", "options": (null: null));
  width: 32.20339%;
  float: left;
  margin-right: -100%;
  margin-left: 42.37288%;
  clear: none;
}

.header2 {
  background: red;
  height: 90px;
}
.header2 .header-text {
  -sgs-span-settings: ("span": 4, "location": 6, "grid": 12, "gutter": 0.25, "style": "opposite", "start row": false, "end row": false, "fixed gutter": false, "split gutter": null, "gutter property": "margin", "options": (null: null));
  width: 32.20339%;
  float: left;
  margin-right: -100%;
  margin-left: 42.37288%;
  clear: none;
}

.menu {
  background: green;
  height: 50px;
}

SassMeister-rendered.html

<div class="header1 full-stripe">
  <div class="logo full-stripe">
    <div class="container darker">
      <div class="darker">
       <img src="http://lorempixel.com/output/abstract-q-c-200-180-2.jpg"/>
      </div>
     </div>
  </div>
  <div class="header-text container darker">
    <div class="darker">This is the top header</div>
  </div>
</div>
<div class="header2 full-stripe">
  <div class="header-text container darker">
    <div class=" darker">This is bottom header</div>
  </div>
</div>
<div class="menu full-stripe">
  <div class="container darker">
  This is the menu
  </div>
</div>
<main class="container overlay">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur malesuada nunc magna, eu placerat nunc rhoncus non. Pellentesque vel est tincidunt, commodo risus ut, ullamcorper libero. Donec nec pharetra sapien, id sollicitudin turpis. Curabitur molestie tempus tellus, viverra molestie massa accumsan quis. Fusce tempor risus a sollicitudin dignissim. Morbi fermentum rhoncus lectus. Sed euismod mi vitae leo aliquam condimentum. Vivamus pellentesque in est eu gravida. Sed consequat nisi vel arcu imperdiet rutrum.
</main>