Cacher is the code snippet organizer for pro developers

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

Undefined mixin 'breakpoint'.

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

@import "breakpoint";
@import "susy";
$susy: (
  columns: 12,
  container: 100%,
  gutters: .1618,
  debug: (
    image: show,
    color: rgba(orange,.1),
    output: background
  )
);
div {
  box-sizing: border-box;
}
.container {
  @include container;
  @include show-grid;
  @include breakpoint(720px) {
    @include show-grid;
  }
  @include breakpoint(1200px) {
    @include show-grid;
  }
  min-height: 96vh;
  font-size: 2em;
  div {
    padding: .5em;
    text-align: center;
    border: 1px solid blue;
  }
}
.small {
  @include span(4 first);
    @include breakpoint(720px) {
      @include span(2 at 1);
    }
    @include breakpoint(1200px) {
      @include span(2 at 1);
    }
}
.large {
  @include span(8 last);
  @include breakpoint(720px) {
    @include span(4 at 3);
  }
  @include breakpoint(1200px) {
    @include span(5 at 3);
  }
}
.tiny {
  @include span(4 first);
  @include breakpoint(720px) {
  @include span(2 at 7);
    }
  @include breakpoint(1200px) {
    @include span(1 at 8);
  }
}
.medium {
  @include span(8 last);
  @include breakpoint(720px) {
    @include span(4 at 9);
  }
  @include breakpoint(1200px) {
    @include span(4 at 9);
  }
}

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