Generated by SassMeister.com.

SassMeister-input-HTML.html

<div class="container">
  <div class="one"></div>
  <div class="two"></div>
  <div class="three">
    <div class="inner">Hello</div>
    <div class="inner-two">Hello Two</div>
  </div>
</div>

SassMeister-input.scss

// ----
// Sass (v3.3.9)
// Compass (v1.0.0.alpha.20)
// Singularity Extras (v1.0.0.alpha.3)
// Singularity.gs (v1.2.1)
// ----

@import "singularitygs";
@import "singularity-extras";
@include add-gutter(1 / 3);
@include add-gutter-style("split");

.container {
  @include add-grid(24);
  height: 80vh;
  background: rgba(gray, 0.5);
}

.one {
  @include grid-span(1, 1);
  height: 80vh;
  background: rgba(red, 0.5);
}

.two {
  @include grid-span(4, 2);
  height: 80vh;
  background: rgba(blue, 0.5);
}

.three {
  @include grid-span(19, 6);
  height: 80vh;
  background: rgba(green, 0.5);
  .inner{
      @include add-grid(12);
        @include grid-span(6, 1);
        height: 50vh;
        background: rgba(purple, 0.5);
      &:hover{background: black;}
      }
  .inner-two{
      @include add-grid(12);
        @include grid-span(6, 7);
        height: 50vh;
        background: rgba(brown, 0.5);
      }
  
}

SassMeister-output.css

.container {
  height: 80vh;
  background: rgba(128, 128, 128, 0.5);
}

.one {
  width: 3.125%;
  float: left;
  margin-right: -100%;
  margin-left: 0.52083%;
  clear: none;
  height: 80vh;
  background: rgba(255, 0, 0, 0.5);
}

.two {
  width: 15.625%;
  float: left;
  margin-right: -100%;
  margin-left: 4.6875%;
  clear: none;
  height: 80vh;
  background: rgba(0, 0, 255, 0.5);
}

.three {
  width: 78.125%;
  float: right;
  margin-left: 0;
  margin-right: 0.52083%;
  clear: none;
  height: 80vh;
  background: rgba(0, 128, 0, 0.5);
}
.three .inner {
  width: 47.91667%;
  float: left;
  margin-right: -100%;
  margin-left: 1.04167%;
  clear: none;
  height: 50vh;
  background: rgba(128, 0, 128, 0.5);
}
.three .inner:hover {
  background: black;
}
.three .inner-two {
  width: 47.91667%;
  float: right;
  margin-left: 0;
  margin-right: 1.04167%;
  clear: none;
  height: 50vh;
  background: rgba(165, 42, 42, 0.5);
}

SassMeister-rendered.html

<div class="container">
  <div class="one"></div>
  <div class="two"></div>
  <div class="three">
    <div class="inner">Hello</div>
    <div class="inner-two">Hello Two</div>
  </div>
</div>