Generated by SassMeister.com.

SassMeister-input-HTML.html

<main id="grid">
 <section id="main_background_container">
     <div id="main_side_img">main_side_img</div>
     <div id="main_primary_container">main_primary_container</div>
 </section>
</main>

SassMeister-input.scss

// ----
// libsass (v3.2.5)
// ----

@import 'susy';

$susy: (columns: 8);

#grid{
  @include container(8 show);
}

#main_background_container{
  height: 30em;
}  

#main_side_img{
  @include span(1 no-gutter);
  background: green;
  height: 65%;    
}
#main_primary_container{
  @include span(4 wide);
  background: yellow;
  height: 65%;
}

SassMeister-output.css

#grid {
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
  background-image: linear-gradient(to right, rgba(102, 102, 255, 0.25), rgba(179, 179, 255, 0.25) 80%, transparent 80%);
  background-size: 12.82051%;
  background-origin: content-box;
  background-clip: content-box;
  background-position: left top;
}

#grid:after {
  content: " ";
  display: block;
  clear: both;
}

#main_background_container {
  height: 30em;
}

#main_side_img {
  width: 10.25641%;
  float: left;
  background: green;
  height: 65%;
}

#main_primary_container {
  width: 51.28205%;
  float: left;
  margin-right: 2.5%;
  background: yellow;
  height: 65%;
}

SassMeister-rendered.html

<main id="grid">
 <section id="main_background_container">
     <div id="main_side_img">main_side_img</div>
     <div id="main_primary_container">main_primary_container</div>
 </section>
</main>