Generated by SassMeister.com.

SassMeister-input-HTML.haml

.wrap
  .content
    %h2 Content
    .gallery
      .gallery__item
        %h2 Item 1
        .gallery__subitem
          %h2 Subitem 1
        .gallery__subitem
          %h2 Subitem 2
      .gallery__item
        %h2 Item 2
        .gallery__subitem
          %h2 Subitem 1
        .gallery__subitem
          %h2 Subitem 2
      .gallery__item
        %h2 Item 3
    .full
      %h2 Full Wide Item
  .sidebar
    %h2 Sidebar

SassMeister-input.sass

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

@import "susy"

$susy: ( columns: 8, container: 1140px, global-box-sizing: border-box, debug: (image: show), gutter-position: split )
+border-box-sizing

@mixin cf
  &:after
    content: ""
    display: block
    clear: both
    
body
  font-family: sans-serif

.wrap
  +container()
  
.content
  +span(6 of 8 nest)
  background: rgba(green, .6)
  
.sidebar
  +span(2 of 8 last nest)
  background: rgba(tomato, .4)
  
.gallery
  +cf
  background: rgba(blue, .6)
  
  &__item
    +cf
    +nested(6)
      +span(2 nest)
      &:nth-child(3)
        +span(2)
    background: rgba(purple, .4)
    
  &__subitem
    +nested(2)
      +span(1)
      background: rgba(yellow, .7)

SassMeister-output.css

*, *:before, *:after {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

body {
  font-family: sans-serif;
}

.wrap {
  max-width: 1140px;
  margin-left: auto;
  margin-right: auto;
  background-image: linear-gradient(to right, transparent 10%, rgba(102, 102, 255, 0.25) 10%, rgba(179, 179, 255, 0.25) 90%, transparent 90%);
  background-size: 12.5%;
  background-origin: content-box;
  background-clip: content-box;
  background-position: left top;
}
.wrap:after {
  content: " ";
  display: block;
  clear: both;
}

.content {
  width: 75%;
  float: left;
  background: rgba(0, 128, 0, 0.6);
}

.sidebar {
  width: 25%;
  float: right;
  background: rgba(255, 99, 71, 0.4);
}

.gallery {
  background: rgba(0, 0, 255, 0.6);
}
.gallery:after {
  content: "";
  display: block;
  clear: both;
}
.gallery__item {
  width: 33.33333%;
  float: left;
  background: rgba(128, 0, 128, 0.4);
}
.gallery__item:after {
  content: "";
  display: block;
  clear: both;
}
.gallery__item:nth-child(3) {
  width: 30%;
  float: left;
  margin-left: 1.66667%;
  margin-right: 1.66667%;
}
.gallery__subitem {
  width: 40%;
  float: left;
  margin-left: 5%;
  margin-right: 5%;
  background: rgba(255, 255, 0, 0.7);
}

SassMeister-rendered.html

<div class='wrap'>
  <div class='content'>
    <h2>Content</h2>
    <div class='gallery'>
      <div class='gallery__item'>
        <h2>Item 1</h2>
        <div class='gallery__subitem'>
          <h2>Subitem 1</h2>
        </div>
        <div class='gallery__subitem'>
          <h2>Subitem 2</h2>
        </div>
      </div>
      <div class='gallery__item'>
        <h2>Item 2</h2>
        <div class='gallery__subitem'>
          <h2>Subitem 1</h2>
        </div>
        <div class='gallery__subitem'>
          <h2>Subitem 2</h2>
        </div>
      </div>
      <div class='gallery__item'>
        <h2>Item 3</h2>
      </div>
    </div>
    <div class='full'>
      <h2>Full Wide Item</h2>
    </div>
  </div>
  <div class='sidebar'>
    <h2>Sidebar</h2>
  </div>
</div>