Generated by SassMeister.com.

SassMeister-input-HTML.html

<div class="parent">
  <div class="child one">Spaceflights cannot be stopped. This is not the work of any one man or even a group of men. It is a historical process which mankind is carrying out in accordance with the natural laws of human development.</div>
  <div class="child two">The Earth was small, light blue, and so touchingly alone, our home that must be defended like a holy relic. The Earth was absolutely round. I believe I never knew what the word round meant until I saw Earth from space.</div>
  <div
</div>

SassMeister-input.scss

// ----
// Sass (v3.3.14)
// Compass (v1.0.0.rc.1)
// Breakpoint (v2.4.6)
// Susy (v2.1.3)
// ----

@import 'susy';
@import 'breakpoint';

$bp-large: 900px;


// this DOES change the gutters, but for ALL layouts
// $susy: (
//   columns: 4,
//   gutters: 1/2,
// );


$susy-small: (
  columns: 4,
  gutters: 1/4,
  math: fluid,
  output: float,
  gutter-position: inside,
  global-box-sizing: border-box,
  debug: (
    image: show,
    color: purple,
    output: background,
    toggle: top right,
  ),
);

$susy-large: (
  columns: 12,
  gutters: 1/2,
  math: fluid,
  output: float,
  gutter-position: inside,
  global-box-sizing: border-box,
  debug: (
    image: show,
    color: orange,
    output: background,
    toggle: top right,
  ),
);

.parent {
  @include container($susy-small);
  @include breakpoint($bp-large) {
    @include container($susy-large);
  }
  }
.child.one {
  @include span(2 of 4);
  @include breakpoint($bp-large) {
    @include span(6 of 12);
  }
}

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

SassMeister-output.css

.parent {
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
  background-image: linear-gradient(to right, rgba(102, 102, 255, 0.25), rgba(179, 179, 255, 0.25));
  background-size: 25%;
  background-origin: content-box;
  background-clip: content-box;
  background-position: left top;
}
.parent:after {
  content: " ";
  display: block;
  clear: both;
}
@media (min-width: 900px) {
  .parent {
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
    background-image: linear-gradient(to right, rgba(102, 102, 255, 0.25), rgba(179, 179, 255, 0.25));
    background-size: 8.33333%;
    background-origin: content-box;
    background-clip: content-box;
    background-position: left top;
  }
  .parent:after {
    content: " ";
    display: block;
    clear: both;
  }
}

.child.one {
  width: 47.36842%;
  float: left;
  margin-right: 5.26316%;
}
@media (min-width: 900px) {
  .child.one {
    width: 49.15254%;
    float: left;
    margin-right: 1.69492%;
  }
}

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

SassMeister-rendered.html

<div class="parent">
  <div class="child one">Spaceflights cannot be stopped. This is not the work of any one man or even a group of men. It is a historical process which mankind is carrying out in accordance with the natural laws of human development.</div>
  <div class="child two">The Earth was small, light blue, and so touchingly alone, our home that must be defended like a holy relic. The Earth was absolutely round. I believe I never knew what the word round meant until I saw Earth from space.</div>
  <div
</div>