Edit in JSFiddle

<div class="container">
  <div class="tile1"></div>
  <div class="tile2"></div>
  <div class="tile3"></div>
  <div class="tile4"></div>
  <div class="tile5"></div>
  <div class="tile6"></div>
  <div class="tile7"></div>
  <div class="tile8"></div>
  <div class="tile9"></div>
  <div class="tile10"></div>
  <div class="tile11"></div>
  <div class="tile12"></div>
  <div class="tile13"></div>
  <div class="tile14"></div>
  <div class="tile15"></div>
  <div class="tile16"></div>
  <div class="tile17"></div>
  <div class="tile18"></div>
  <div class="tile19"></div>
  <div class="tile20"></div>
</div>

// ----
// Sass (v3.4.21)
// Compass (v1.0.3)
// ----

$tile-width: 5%;
$tile-height: 150px;
$root-color: blue;

.container{
  -webkit-display: flex;
  display: flex;
  -webkit-flex-direction: row;
  flex-direction: row;
  .tile {
  flex-basis: $tile-width;
  height: $tile-height;
  }
}
@for $i from 1 through 20 {
@debug starting loop number $i;

.tile#{$i} {
@extend .tile;
background-color: lighten($root-color, $i*2);
	}
}