SCSS

by ken3desu

HTML

<div class="flex-row">
<div class="col-box"><div class="box-l-1"></div><div class="box-r-1"></div></div>
<div class="col-box"><div class="box-l-2"></div><div class="box-r-2"></div></div>
<div class="col-box"><div class="box-l-3"></div><div class="box-r-3"></div></div>
<div class="col-box"><div class="box-l-4"></div><div class="box-r-4"></div></div>
<div class="col-box"><div class="box-l-5"></div><div class="box-r-5"></div></div>
<div class="col-box"><div class="box-l-6"></div><div class="box-r-6"></div></div>
<div class="col-box"><div class="box-l-7"></div><div class="box-r-7"></div></div>
</div>

SCSS

.flex-row {
  display: flex;
  height: 8em;
  width: 30em;
}

.col-box {
  display: flex;
  flex-direction: column;
}

.box {
  width: 2.25em;
  border: solid darken(#fff, 20%);
}

$base: hsl(0, 100%, 50%);
@for $i from 1 through 7 {
  .box-l-#{$i} {
    @extend .box;
    background: adjust-hue($base, ($i - 1)*30deg);
    height: #{$i}em;
  }
  .box-r-#{$i} {
    @extend .box;
    background: adjust-hue($base, -($i - 1)*30deg);
    height: calc(100% - #{$i}em);
  }
}