Generated by SassMeister.com.

SassMeister-input-HTML.html

 <div class="container">
  <div class="one">1</div>
  <div class="two">2</div>
  <div class="three">3</div>
  <div class="four">4</div>
</div>

SassMeister-input.scss

// ----
// Sass (v3.3.14)
// Compass (v1.0.1)
// Susy (v2.1.3)
// ----

@import "susy";
$susy: (
  flow: ltr, // ltr | rtl
  output: float, // float | isolate
  math: fluid, // fluid | static (requires column-width)
  column-width: false, // false | value
  container: 700px, // length or % | auto
  container-position: center, // left | center | right | <length> [*2] (grid padding)
  last-flow: to,
  columns: 12,
  gutters: 1/4,
  gutter-position: after, // before | after | split | inside | inside-static (requires column-width)
  global-box-sizing: border-box, // content-box | border-box (affects inside/inside-static)
  debug: (
    image: show,
    color: rgba(#66f, .25),
    output: background, // background | overlay
    toggle: top left,
  ),
);
.container {height: 500px;}
.one {height: 200px;background: blue;}
.two {height: 200px;background: green;}
.three {height: 200px;background: red;}
.four {height: 200px;background: yellow;}

.container {
  @include container();
  // width: container();
}

.one {
  @include span(6);
  // margin-top: span(3 of 7);
  // height: span(6);
  //@include span(10);
}

.two {
  @include span(3);
  // @include gutters(3em inside);
  // margin-top: gutter();
  // @include break;
  // @include pre(1);
  // @include pull(1);
  // @include push(1);
  // @include squish(1);
  // @include prefix(1);
  // @include suffix(1);
  // @include pad(1);


}

.three {
  @include span(1);
}

.four {
  @include span(1);
  // @include last;
}

SassMeister-output.css

.container {
  height: 500px;
}

.one {
  height: 200px;
  background: blue;
}

.two {
  height: 200px;
  background: green;
}

.three {
  height: 200px;
  background: red;
}

.four {
  height: 200px;
  background: yellow;
}

.container {
  max-width: 700px;
  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: 8.47458%;
  background-origin: content-box;
  background-clip: content-box;
  background-position: left top;
}
.container:after {
  content: " ";
  display: block;
  clear: both;
}

.one {
  width: 49.15254%;
  float: left;
  margin-right: 1.69492%;
}

.two {
  width: 23.72881%;
  float: left;
  margin-right: 1.69492%;
}

.three {
  width: 6.77966%;
  float: left;
  margin-right: 1.69492%;
}

.four {
  width: 6.77966%;
  float: left;
  margin-right: 1.69492%;
}

SassMeister-rendered.html

 <div class="container">
  <div class="one">1</div>
  <div class="two">2</div>
  <div class="three">3</div>
  <div class="four">4</div>
</div>