Generated by SassMeister.com.

SassMeister-input-HTML.html

<div class="s1"></div>
<div class="s2">
<div class="x">
  <div class="thumb"><div class="x"></div></div>
  <div class="thumb"><div class="x"></div></div>  
  <div class="thumb"><div class="x"></div></div>
  </div>
</div>

SassMeister-input.scss

// ----
// Sass (v3.3.14)
// Compass (v1.0.1)
// Scut (v1.0.1)
// ----

@import "scut";
*{
  box-sizing: border-box;
  }
.s1 {
  @include scut-ratio-box(4/3);
  background:#f00;
  width:50%;
    float:left;
}
.s2 {
  @include scut-ratio-box(4/3);
  background:#aaa;
  width:50%;
  float:left;
  >.x{
    position:absolute;
    width:100%;
    bottom:-20px;
    top:0;
    left:0;
  }
  .thumb {
    height: (100% / 3);
    padding-bottom:20px;
    >.x{
      background:#fff;
      height:100%;
    }
  }
}

SassMeister-output.css

/*
* Scut, a collection of Sass utilities
* to ease and improve our implementations of common style-code patterns.
* v1.0.1
* Docs at http://davidtheclark.github.io/scut
*/
* {
  box-sizing: border-box;
}

.s1 {
  overflow: hidden;
  position: relative;
  background: #f00;
  width: 50%;
  float: left;
}
.s1:before {
  content: "";
  display: block;
  height: 0;
  padding-top: 75%;
}

.s2 {
  overflow: hidden;
  position: relative;
  background: #aaa;
  width: 50%;
  float: left;
}
.s2:before {
  content: "";
  display: block;
  height: 0;
  padding-top: 75%;
}
.s2 > .x {
  position: absolute;
  width: 100%;
  bottom: -20px;
  top: 0;
  left: 0;
}
.s2 .thumb {
  height: 33.33333%;
  padding-bottom: 20px;
}
.s2 .thumb > .x {
  background: #fff;
  height: 100%;
}

SassMeister-rendered.html

<div class="s1"></div>
<div class="s2">
<div class="x">
  <div class="thumb"><div class="x"></div></div>
  <div class="thumb"><div class="x"></div></div>  
  <div class="thumb"><div class="x"></div></div>
  </div>
</div>