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

// ----
// libsass (v0.7.0)
// ----

$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};
  }
}

@media only screen
and (min-width : 320px) 
and (max-width : 480px) {
  .box {
    width: $grid-width / 1;
  }
  body {
    background-color: darkkhaki;
  }
  .box:nth-child(1n+1) {
    background-color: yellow;
    clear: left;
  }
}

@media only screen 
and (min-width : 481px) 
and (max-width : 1024px)  {
  .box {
   width: $grid-width / 2; 
  }
  body {
    background-color: papayawhip;
  }

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

@media only screen and (min-width : 1025px) {
  .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 only screen and (min-width: 320px) and (max-width: 480px) {
  .box {
    width: 100%; }
  body {
    background-color: darkkhaki; }
  .box:nth-child(1n+1) {
    background-color: yellow;
    clear: left; } }

@media only screen and (min-width: 481px) and (max-width: 1024px) {
  .box {
    width: 50%; }
  body {
    background-color: papayawhip; }
  .box:nth-child(2n+1) {
    background-color: blue;
    clear: left; } }

@media only screen and (min-width: 1025px) {
  .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>