Generated by SassMeister.com.

SassMeister-input-HTML.haml

.wrapper
  - 20.times do |i|
    %div{:class =>"box box-#{i+1} height-#{1 + rand(3)}"}
      box

SassMeister-input.scss

// ----
// Sass (v3.2.14)
// Compass (v0.12.2)
// Breakpoint (v2.0.7)
// Breakpoint Slicer (v1.2)
// ----

@import "breakpoint-slicer";
$slicer-breakpoints: 0 400px 600px 800px 1050px;

$small: 1;
$medium: 2;
$large: 4;

$grid-width: 100%;

* {
  box-sizing: border-box;  
}

.wrapper {
  max-width: 1200px;
  margin: 0 auto;
}

.box {
  height: 100px;
  float: left;
  background-color: #bada55;
  margin-bottom: 20px;
}

@for $i from 1 through 3 {
  .height-#{$i} {
    height: #{$i * 100px};
  }
}

@include at($small){
  .box {
    width: $grid-width / 1;
  }
  body {
    background-color: darkkhaki;
  }
  .box:nth-child(1n+1) {
    background-color: yellow;
    clear: left;
  }
}

@include between($medium,$large - 1){
  .box {
   width: $grid-width / 2; 
  }
  body {
    background-color: papayawhip;
  }

  .box:nth-child(2n+1) {
    background-color: blue;
    clear: left;
  }
}

@include from($large) {
  .box {
    width: $grid-width / 4;
  }
  body {
    background-color: moccasin;
  }
  .box:nth-child(4n+1) {
    background-color: red;
    clear: left;
  }
}

SassMeister-output.css

* {
  box-sizing: border-box;
}

.wrapper {
  max-width: 1200px;
  margin: 0 auto;
}

.box {
  height: 100px;
  float: left;
  background-color: #bada55;
  margin-bottom: 20px;
}

.height-1 {
  height: 100px;
}

.height-2 {
  height: 200px;
}

.height-3 {
  height: 300px;
}

@media (max-width: 400px) {
  .box {
    width: 100%;
  }

  body {
    background-color: darkkhaki;
  }

  .box:nth-child(1n+1) {
    background-color: yellow;
    clear: left;
  }
}
@media (min-width: 401px) and (max-width: 800px) {
  .box {
    width: 50%;
  }

  body {
    background-color: papayawhip;
  }

  .box:nth-child(2n+1) {
    background-color: blue;
    clear: left;
  }
}
@media (min-width: 801px) {
  .box {
    width: 25%;
  }

  body {
    background-color: moccasin;
  }

  .box:nth-child(4n+1) {
    background-color: red;
    clear: left;
  }
}

SassMeister-rendered.html

<div class='wrapper'>
  <div class='box box-1 height-2'>
    box
  </div>
  <div class='box box-2 height-2'>
    box
  </div>
  <div class='box box-3 height-3'>
    box
  </div>
  <div class='box box-4 height-1'>
    box
  </div>
  <div class='box box-5 height-3'>
    box
  </div>
  <div class='box box-6 height-2'>
    box
  </div>
  <div class='box box-7 height-1'>
    box
  </div>
  <div class='box box-8 height-1'>
    box
  </div>
  <div class='box box-9 height-2'>
    box
  </div>
  <div class='box box-10 height-1'>
    box
  </div>
  <div class='box box-11 height-3'>
    box
  </div>
  <div class='box box-12 height-2'>
    box
  </div>
  <div class='box box-13 height-2'>
    box
  </div>
  <div class='box box-14 height-1'>
    box
  </div>
  <div class='box box-15 height-1'>
    box
  </div>
  <div class='box box-16 height-2'>
    box
  </div>
  <div class='box box-17 height-1'>
    box
  </div>
  <div class='box box-18 height-3'>
    box
  </div>
  <div class='box box-19 height-2'>
    box
  </div>
  <div class='box box-20 height-2'>
    box
  </div>
</div>