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))
+border-box-sizing

=cf 
  &:after
    content: ""
    display: block
    clear: both
    
.wrap
  +container

.content
  background: rgba(green, .2)
  min-height: 100vh
  +span(6)
  
.sidebar
  background: rgba(red, .2)
  height: 100vh
  +span(2 last)
  
.gallery
  +cf
  
  &__item
    background: rgba(tomato, .4)
    +gallery(2 of 6)
    
    &:nth-child(2n)
      background: rgba(purple, .4)
      
    &:nth-child(3n)
      background: rgba(black, .4)
      color: #FCFCFC
  .gallery__subitem    
    +nested(2)
      // gallery 1 or having +nested(2) inside .gallery with .gallery__subitem failsto render correctly
      background: yellow
      +span(1)
      &:last-child
        +last

SassMeister-output.css

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

.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: 12.82051%;
  background-origin: content-box;
  background-clip: content-box;
  background-position: left top; }
  .wrap:after {
    content: " ";
    display: block;
    clear: both; }

.content {
  background: rgba(0, 128, 0, 0.2);
  min-height: 100vh;
  width: 74.35897%;
  float: left;
  margin-right: 2.5641%; }

.sidebar {
  background: rgba(255, 0, 0, 0.2);
  height: 100vh;
  width: 23.07692%;
  float: right;
  margin-right: 0; }

.gallery:after {
  content: "";
  display: block;
  clear: both; }
.gallery__item {
  background: rgba(255, 99, 71, 0.4);
  width: 31.03448%;
  float: left; }
  .gallery__item:nth-child(3n + 1) {
    margin-left: 0;
    margin-right: -100%;
    clear: both;
    margin-left: 0; }
  .gallery__item:nth-child(3n + 2) {
    margin-left: 34.48276%;
    margin-right: -100%;
    clear: none; }
  .gallery__item:nth-child(3n + 3) {
    margin-left: 68.96552%;
    margin-right: -100%;
    clear: none; }
  .gallery__item:nth-child(2n) {
    background: rgba(128, 0, 128, 0.4); }
  .gallery__item:nth-child(3n) {
    background: rgba(0, 0, 0, 0.4);
    color: #FCFCFC; }
.gallery .gallery__subitem {
  background: yellow;
  width: 44.44444%;
  float: left;
  margin-right: 11.11111%; }
  .gallery .gallery__subitem:last-child {
    float: right;
    margin-right: 0; }

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>