Generated by SassMeister.com.

SassMeister-input-HTML.haml

.wrap
  .content2
    %h2 Content 2
    
  .content
    %h2 Content
    
  .sidebar1
    %h2 Sidebar 1
    
  .sidebar2
    %h2 Sidebar 2
    

SassMeister-input.sass

// ----
// Sass (v3.4.12)
// Compass (v1.0.3)
// Susy (v2.2.2)
// ----

@import susy

// Demonstrate Isolate Method Quirk when elements laid out by the isolate method is preceded by a full element 
$susy: (columns: 4, container: 1140px, global-box-sizing: border-box, output: float, debug: (image: show), gutter_position: split)

//@include border-box-sizing

body
  font-family: sans-serif
  text-align: center
  color: #FCFCFC
.wrap
  +container
  
  +susy-breakpoint(960px, 12)
    +show-grid
    
.content
  //+full
  background: rgba(blue, .8)
  margin-bottom: 1em
  
  +susy-breakpoint(960px, 12)
    +span(isolate 8 at 3)
  
.sidebar1
  +span(isolate 2 first)
  background: rgba(green, .4)
  
  +susy-breakpoint(960px, 12)
    +span(isolate 2 first)
  
.sidebar2
  +span(isolate 2 last)
  background: rgba(purple, .4)
  
  +susy-breakpoint(960px, 12)
    +span(isolate 2 last)

.content2
  // try using the +full mix-in and what how the layout breaks
  clear: both
  background: red

SassMeister-output.css

body {
  font-family: sans-serif;
  text-align: center;
  color: #FCFCFC;
}

.wrap {
  max-width: 1140px;
  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: 26.31579%;
  background-origin: content-box;
  background-clip: content-box;
  background-position: left top;
}
.wrap:after {
  content: " ";
  display: block;
  clear: both;
}
@media (min-width: 960px) {
  .wrap {
    background-image: linear-gradient(to right, rgba(102, 102, 255, 0.25), rgba(179, 179, 255, 0.25) 80%, transparent 80%);
    background-size: 8.47458%;
    background-origin: content-box;
    background-clip: content-box;
    background-position: left top;
  }
}

.content {
  background: rgba(0, 0, 255, 0.8);
  margin-bottom: 1em;
}
@media (min-width: 960px) {
  .content {
    width: 66.10169%;
    float: left;
    margin-left: 16.94915%;
    margin-right: -100%;
  }
}

.sidebar1 {
  width: 47.36842%;
  float: left;
  margin-left: 0;
  margin-right: -100%;
  background: rgba(0, 128, 0, 0.4);
}
@media (min-width: 960px) {
  .sidebar1 {
    width: 15.25424%;
    float: left;
    margin-left: 0;
    margin-right: -100%;
  }
}

.sidebar2 {
  width: 47.36842%;
  float: left;
  margin-left: 52.63158%;
  margin-right: -100%;
  background: rgba(128, 0, 128, 0.4);
}
@media (min-width: 960px) {
  .sidebar2 {
    width: 15.25424%;
    float: left;
    margin-left: 84.74576%;
    margin-right: -100%;
  }
}

.content2 {
  clear: both;
  background: red;
}

SassMeister-rendered.html

<div class='wrap'>
  <div class='content2'>
    <h2>Content 2</h2>
  </div>
  <div class='content'>
    <h2>Content</h2>
  </div>
  <div class='sidebar1'>
    <h2>Sidebar 1</h2>
  </div>
  <div class='sidebar2'>
    <h2>Sidebar 2</h2>
  </div>
</div>