Edit in JSFiddle

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

$tile-size: 100px;
$root-color: blue;

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

.tile#{$i} {
@extend .tile;
background-color: lighten($root-color, $i*4);
	}
}
<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>