Generated by SassMeister.com.

SassMeister-input-HTML.html

<div class="container">
  <div class="small">
    Small
  </div>
  <div class="large">
    Large
  </div>
  <div class="tiny">
    Tiny
  </div>
  <div class="medium">
    Medium
  </div>
</div>

SassMeister-input.scss

// ----
// Sass (v3.4.6)
// Compass (v1.0.1)
// Breakpoint (v2.5.0)
// Susy (v2.1.3)
// ----

@import "breakpoint";
@import "susy";

$susy: (
  gutters: .0618,
  debug: (
    image: show,
    color: rgba(orange,.1),
    output: background
  )
);
$small: (
  columns: 1 1.618,
  container: 100%
);
$medium: (
  columns: 1 1.618 1 1.618,
  container: 100%,
  output: isolate
);
$large: (
  columns: 1 2.618 0.618 1.618,
  container: 1200px,
  output: isolate,
);
@include layout($small);
div {
  box-sizing: border-box;
}
.container {
  @include container;
  @include show-grid;
  @include susy-breakpoint(720px, $medium) {
    @include show-grid;
  }
  @include susy-breakpoint(1200px, $large) {
    @include show-grid;
  }
  min-height: 96vh;
  font-size: 2em;
  div {
    padding: .5em;
    text-align: center;
  }
}
.small {
  @include span(1 first);
    @include susy-breakpoint(720px, $medium) {
      @include span(1 at 1);
    }
    @include susy-breakpoint(1200px, $large) {
      @include span(1 at 1);
    }
}
.large {
  @include span(1 last);
  @include susy-breakpoint(720px, $medium) {
    @include span(1 at 2);
  }
  @include susy-breakpoint(1200px, $large) {
    @include span(1 at 2);
  }
}
.tiny {
  @include span(1 first);
  @include susy-breakpoint(720px, $medium) {
  @include span(1 at 3);
    }
  @include susy-breakpoint(1200px, $large) {
    @include span(1 at 3);
  }
}
.medium {
  @include span(1 last);
  @include susy-breakpoint(720px, $medium) {
    @include span(1 at 4);
  }
  @include susy-breakpoint(1200px, $large) {
    @include span(1 at 4);
  }
}

SassMeister-output.css

div {
  box-sizing: border-box;
}

.container {
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
  background-image: linear-gradient(to right, rgba(255, 165, 0, 0.1), rgba(255, 192, 77, 0.1) 37.31622%, transparent 37.31622%, transparent 39.62236%, rgba(255, 165, 0, 0.1) 39.62236%, rgba(255, 192, 77, 0.1));
  background-origin: content-box;
  background-clip: content-box;
  background-position: left top;
  background-image: linear-gradient(to right, rgba(255, 165, 0, 0.1), rgba(255, 192, 77, 0.1) 37.31622%, transparent 37.31622%, transparent 39.62236%, rgba(255, 165, 0, 0.1) 39.62236%, rgba(255, 192, 77, 0.1));
  background-origin: content-box;
  background-clip: content-box;
  background-position: left top;
  min-height: 96vh;
  font-size: 2em;
}
.container:after {
  content: " ";
  display: block;
  clear: both;
}
@media (min-width: 720px) {
  .container {
    background-image: linear-gradient(to right, rgba(255, 165, 0, 0.1), rgba(255, 192, 77, 0.1) 18.44542%, transparent 18.44542%, transparent 19.58535%, rgba(255, 165, 0, 0.1) 19.58535%, rgba(255, 192, 77, 0.1) 49.43004%, transparent 49.43004%, transparent 50.56996%, rgba(255, 165, 0, 0.1) 50.56996%, rgba(255, 192, 77, 0.1) 69.01538%, transparent 69.01538%, transparent 70.15531%, rgba(255, 165, 0, 0.1) 70.15531%, rgba(255, 192, 77, 0.1));
    background-origin: content-box;
    background-clip: content-box;
    background-position: left top;
  }
}
@media (min-width: 1200px) {
  .container {
    background-image: linear-gradient(to right, rgba(255, 165, 0, 0.1), rgba(255, 192, 77, 0.1) 16.55794%, transparent 16.55794%, transparent 17.58122%, rgba(255, 165, 0, 0.1) 17.58122%, rgba(255, 192, 77, 0.1) 60.92989%, transparent 60.92989%, transparent 61.95317%, rgba(255, 165, 0, 0.1) 61.95317%, rgba(255, 192, 77, 0.1) 72.18598%, transparent 72.18598%, transparent 73.20926%, rgba(255, 165, 0, 0.1) 73.20926%, rgba(255, 192, 77, 0.1));
    background-origin: content-box;
    background-clip: content-box;
    background-position: left top;
  }
}
.container div {
  padding: .5em;
  text-align: center;
}

.small {
  width: 37.31622%;
  float: left;
  margin-right: 2.30614%;
}
@media (min-width: 720px) {
  .small {
    width: 18.44542%;
    float: left;
    margin-left: 0;
    margin-right: -100%;
  }
}
@media (min-width: 1200px) {
  .small {
    width: 16.55794%;
    float: left;
    margin-left: 0;
    margin-right: -100%;
  }
}

.large {
  width: 60.37764%;
  float: right;
  margin-right: 0;
}
@media (min-width: 720px) {
  .large {
    width: 29.84469%;
    float: left;
    margin-left: 19.58535%;
    margin-right: -100%;
  }
}
@media (min-width: 1200px) {
  .large {
    width: 43.34868%;
    float: left;
    margin-left: 17.58122%;
    margin-right: -100%;
  }
}

.tiny {
  width: 37.31622%;
  float: left;
  margin-right: 2.30614%;
}
@media (min-width: 720px) {
  .tiny {
    width: 18.44542%;
    float: left;
    margin-left: 50.56996%;
    margin-right: -100%;
  }
}
@media (min-width: 1200px) {
  .tiny {
    width: 10.2328%;
    float: left;
    margin-left: 61.95317%;
    margin-right: -100%;
  }
}

.medium {
  width: 60.37764%;
  float: right;
  margin-right: 0;
}
@media (min-width: 720px) {
  .medium {
    width: 29.84469%;
    float: left;
    margin-left: 70.15531%;
    margin-right: -100%;
  }
}
@media (min-width: 1200px) {
  .medium {
    width: 26.79074%;
    float: left;
    margin-left: 73.20926%;
    margin-right: -100%;
  }
}

SassMeister-rendered.html

<div class="container">
  <div class="small">
    Small
  </div>
  <div class="large">
    Large
  </div>
  <div class="tiny">
    Tiny
  </div>
  <div class="medium">
    Medium
  </div>
</div>