Generated by SassMeister.com.

SassMeister-input-HTML.html

<div class="page">
    <ul class="highlight">
      <li>blok 1</li>
      <li>blok 2</li>
      <li>blok 3</li>
    </ul>
    <div class="content">
      <div><h3>I'm 1</h3></div>
      <div><h3>I'm 2</h3></div>
      <div><h3>I'm 3</h3></div>
      <div><h3>I'm 4</h3></div>
      <div><h3>I'm 5</h3></div>
      <div><h3>I'm 6</h3></div>
    </div>
    <div class="now-and-later">
      <h1>Hello full width</h1>
    </div>
  </div>

SassMeister-input.scss

// ----
// libsass (v3.2.5)
// ----

@import "susy";

$susy: (
  flow: ltr, // ltr | rtl
  output: float, // float | isolate
  math: static, // fluid | static (requires column-width)
  column-width: 50px, // false | value
  container: 920px, // length or % | auto
  container-position: center, // left | center | right | <length> [*2] (grid padding)
  last-flow: to,
  columns: 12,
  gutters: 0.75,
  gutter-position: after, // before | after | split | inside | inside-static (requires column-width)
  global-box-sizing: content-box, // content-box | border-box (affects inside/inside-static)
);

ul li { 
  list-style: none;
}

.page {
  @include container;
}
.now-and-later {
  @include full;
}
.content {
  div {
      @include gallery(4);
  }
}
.highlight {
  @include full;
  li {
    height: 200px;
    background-color: red;
  }
  li:first-child {
    @include span(4)
  }
  li:nth-child(2){
    @include span(last 6)
  }
  li:nth-child(3){
    @include span(last 6)
  }
}

.content {
  h3 {
    margin: 10px;
  }
  div {
    height: 100px;
    margin-top: 10px;
    margin-bottom: 10px;
  }
  div:nth-child(3n) {
     background: #2F94B2;
  }
  div:nth-child(3n+1) {
     background: #FF7311;
  }
  div:nth-child(3n+2) {
     background: #5DD9FF;
  }
}

SassMeister-output.css

ul li {
  list-style: none;
}

.page {
  width: 920px;
  margin-left: auto;
  margin-right: auto;
}

.page:after {
  content: " ";
  display: block;
  clear: both;
}

.now-and-later {
  clear: both;
  width: 100%;
  float: left;
  margin-left: 0;
  margin-right: 0;
}

.content div {
  width: 312.5px;
  float: left;
}

.content div:nth-child(3n + 1) {
  margin-left: 0;
  margin-right: -100%;
  clear: both;
  margin-left: 0;
}

.content div:nth-child(3n + 2) {
  margin-left: 350px;
  margin-right: -100%;
  clear: none;
}

.content div:nth-child(3n + 3) {
  margin-left: 700px;
  margin-right: -100%;
  clear: none;
}

.highlight {
  clear: both;
  width: 100%;
  float: left;
  margin-left: 0;
  margin-right: 0;
}

.highlight li {
  height: 200px;
  background-color: red;
}

.highlight li:first-child {
  width: 312.5px;
  float: left;
  margin-right: 37.5px;
}

.highlight li:nth-child(2) {
  width: 487.5px;
  float: right;
  margin-right: 0;
}

.highlight li:nth-child(3) {
  width: 487.5px;
  float: right;
  margin-right: 0;
}

.content h3 {
  margin: 10px;
}

.content div {
  height: 100px;
  margin-top: 10px;
  margin-bottom: 10px;
}

.content div:nth-child(3n) {
  background: #2F94B2;
}

.content div:nth-child(3n+1) {
  background: #FF7311;
}

.content div:nth-child(3n+2) {
  background: #5DD9FF;
}

SassMeister-rendered.html

<div class="page">
    <ul class="highlight">
      <li>blok 1</li>
      <li>blok 2</li>
      <li>blok 3</li>
    </ul>
    <div class="content">
      <div><h3>I'm 1</h3></div>
      <div><h3>I'm 2</h3></div>
      <div><h3>I'm 3</h3></div>
      <div><h3>I'm 4</h3></div>
      <div><h3>I'm 5</h3></div>
      <div><h3>I'm 6</h3></div>
    </div>
    <div class="now-and-later">
      <h1>Hello full width</h1>
    </div>
  </div>