Generated by SassMeister.com.

SassMeister-input-HTML.html

<div class="page">
  <div class="header">
    Header
  </div>
  <div class="main">
    <div class="main-left">
      <div class="main-left-container">
        <p>Main-Left</p>
      </div>
    </div>
    <div class="main-right">
      <div class="main-right-container">
        <p>Main-Right</p>
        <p>Main-Right</p>
      </div>
    </div>
    <div style="clear: left;">
      
    </div>
  </div>
  <div class="footer">
    Footer
  </div>
</div>

SassMeister-input.scss

// ----
// Sass (v3.4.4)
// Compass (v1.0.1)
// Susy (v2.1.3)
// ----

@import 'susy';
$susy: (
  columns: 12,
  gutters: 0,
  math: fluid
);

// Container
.page {
  @include container();
  background: black;
}

// Layout

.header {
  color: #fff;  
  background: green;
}

.pagenav {
  clear: both;
}

.main {
  clear: both;
  position: relative;
  z-index: 1;
  width: 100%;
  background: #eee;

  .main-left {  
    @include span(3);

    .main-left-container {
      padding: 0 2%;
    }
    
    position: relative;
  }
  
  .main-right {  
    @include span(9) ;
    
    position: relative;
    
      
    .main-right-container {
      padding: 0 2%;
    }
  }
  
}

.main:before {
   content: " ";
   position: absolute;
   top: 10%; 
   z-index: -1;
   left: span(3);
   width: span(9);
   height: 80%;
   border-left: 1px solid black;
}

.footer {
  color: #fff;
  background: green;
  clear: both;
}

SassMeister-output.css

.page {
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
  background: black;
}
.page:after {
  content: " ";
  display: block;
  clear: both;
}

.header {
  color: #fff;
  background: green;
}

.pagenav {
  clear: both;
}

.main {
  clear: both;
  position: relative;
  z-index: 1;
  width: 100%;
  background: #eee;
}
.main .main-left {
  width: 25%;
  float: left;
  position: relative;
}
.main .main-left .main-left-container {
  padding: 0 2%;
}
.main .main-right {
  width: 75%;
  float: left;
  position: relative;
}
.main .main-right .main-right-container {
  padding: 0 2%;
}

.main:before {
  content: " ";
  position: absolute;
  top: 10%;
  z-index: -1;
  left: 25%;
  width: 75%;
  height: 80%;
  border-left: 1px solid black;
}

.footer {
  color: #fff;
  background: green;
  clear: both;
}

SassMeister-rendered.html

<div class="page">
  <div class="header">
    Header
  </div>
  <div class="main">
    <div class="main-left">
      <div class="main-left-container">
        <p>Main-Left</p>
      </div>
    </div>
    <div class="main-right">
      <div class="main-right-container">
        <p>Main-Right</p>
        <p>Main-Right</p>
      </div>
    </div>
    <div style="clear: left;">
      
    </div>
  </div>
  <div class="footer">
    Footer
  </div>
</div>