Generated by SassMeister.com.

SassMeister-input-HTML.html

<div id="one">
  <p>one</p>
  <div class="childOne"><p>child1</p></div>
  <div class="childTwo"><p>child2</p></div>
</div>

<div id="two">
  <p>two</p>
</div>

SassMeister-input.scss

// ----
// libsass (v3.2.4)
// ----

@import 'singularitygs';
@import 'breakpoint';

$desktop: 600px;

@include add-grid(4 at $desktop);

div {
  text-align: center;
  min-width: 50px;
  min-height: 50px;
  
  p {
    position: relative;
    top: 50%;
    transform: translateY(-50%);
  }
}

#one {
  background-color: lightblue;
  width: 300px;
  height: 200px;
  
  @include breakpoint($desktop) {
    @include grid-span(2, 1);
    
    @include layout(2) {
      .childOne {
        background-color: gray;
        @include grid-span(1, 1);
      }
      .childTwo {
        background-color: lightgray;
        @include grid-span(1, 2);
      }  
    }
    
  }
}

#two {
  background-color: lightblue;
  width: 300px;
  height: 200px;
  
  @include breakpoint($desktop) {
    @include grid-span(2, 3);
  }
}

SassMeister-output.css

div {
  text-align: center;
  min-width: 50px;
  min-height: 50px;
}

div p {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}

#one {
  background-color: lightblue;
  width: 300px;
  height: 200px;
}

@media (min-width: 600px) {
  #one {
    width: 47.36842%;
    float: left;
    margin-right: -100%;
    margin-left: 0;
    clear: none;
  }
  #one .childOne {
    background-color: gray;
    width: 44.44444%;
    float: left;
    margin-right: -100%;
    margin-left: 0;
    clear: none;
  }
  #one .childTwo {
    background-color: lightgray;
    width: 44.44444%;
    float: right;
    margin-left: 0;
    margin-right: 0;
    clear: none;
  }
}

#two {
  background-color: lightblue;
  width: 300px;
  height: 200px;
}

@media (min-width: 600px) {
  #two {
    width: 47.36842%;
    float: right;
    margin-left: 0;
    margin-right: 0;
    clear: none;
  }
}

SassMeister-rendered.html

<div id="one">
  <p>one</p>
  <div class="childOne"><p>child1</p></div>
  <div class="childTwo"><p>child2</p></div>
</div>

<div id="two">
  <p>two</p>
</div>