<div class="grid">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
 </div> <!--/grid-->
//Base Color
$violet-base: #A200FF;

//For Directive
@for $i from 1 through 14 {
   .box:nth-of-type(#{$i}) {
     background-color: darken($violet-base, 2*$i);
   }
}

body {
  background: thistle;
}

//Basic box styling
.grid {
  display: flex;
  flex-wrap: wrap;
  margin: 0 auto;
  max-width: 1300px;
}

//Box Styling
.box {
  width: 20%;
  background-color: blue;
  height: 130px;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.