Generated by SassMeister.com.

SassMeister-input-HTML.html

<div class="blue thingy">
  <div class="col lighten">
    <span class="label">Lighten</span>
  </div>
  <div class="col darken">
    <span class="label">Darken</span>
  </div>
  <div class="col mix">
    <span class="label">Mix</span>
  </div>
</div>

<div class="green thingy">
  <div class="col lighten">
    <span class="label">Lighten</span>
  </div>
  <div class="col darken">
    <span class="label">Darken</span>
  </div>
  <div class="col mix">
    <span class="label">Mix</span>
  </div>
</div>

<div class="yellow thingy">
  <div class="col lighten">
    <span class="label">Lighten</span>
  </div>
  <div class="col darken">
    <span class="label">Darken</span>
  </div>
  <div class="col mix">
    <span class="label">Mix</span>
  </div>
</div>

<div class="red thingy">
  <div class="col lighten">
    <span class="label">Lighten</span>
  </div>
  <div class="col darken">
    <span class="label">Darken</span>
  </div>
  <div class="col mix">
    <span class="label">Mix</span>
  </div>
</div>

<div class="message">
  <p>Mix is better. Always</p>
</div>

SassMeister-input.scss

// ----
// Sass (v3.4.7)
// Compass (v1.0.1)
// ----

$blue   : #2980b9;
$red    : #c0392b;
$green  : #27ae60;
$yellow : #f1c40f;

* {
 &,
 &:before, &:after {
   box-sizing: border-box;
 }
}

html,
body {
  height: 100%;
}
.thingy {
  float: left;
  clear: left;
  margin: 0 0 1rem 0;
  width: 25%;
  height: 50px;
  
}

.col {
  border: 1px solid;
  display: inline-block;
  height: 100%;
  margin: 0 -2px;
  padding: 1rem;
  vertical-align: top;
  width: 33.33%;
  
  &:first-child {
    margin-left: 0;
  }
  
  &:not(:first-child) {
    border-left-width: 0;
  }
}

.blue {
 background-color: $blue;
 .darken {
   background-color: darken($blue, 10%);
 }
 .lighten {
   background-color: lighten($blue, 10%);
 }
 .mix {
   background-color: mix(black, $blue, 10%);
 }
}

.green {
  background-color: $green;
  .darken {
   background-color: darken($green, 10%);
 }
 .lighten {
   background-color: lighten($green, 10%);
 }
 .mix {
   background-color: mix(black, $green, 10%);
 }
}

.yellow {
  background-color: $yellow;
  
  .darken {
   background-color: darken($yellow, 10%);
 }
 .lighten {
   background-color: lighten($yellow, 10%);
 }
 .mix {
   background-color: mix(black, $yellow, 10%);
 }
}

.red {
  background-color: $red;
  
  .darken {
   background-color: darken($red, 10%);
 }
 .lighten {
   background-color: lighten($red, 10%);
 }
 .mix {
   background-color: mix(black, $red, 10%);
 }
}

.message {
  position: absolute;
  right: 0;
  font-family: sans-serif;
  font-size: 4rem;
  height: 100%;
  padding: 3rem;
  transform: translateY(-50%);
  padding-top: 25%;
  width: 100%;
  text-align: right;
  
  p {
    margin: 0;
  }
}

SassMeister-output.css

*, *:before, *:after {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
}

.thingy {
  float: left;
  clear: left;
  margin: 0 0 1rem 0;
  width: 25%;
  height: 50px;
}

.col {
  border: 1px solid;
  display: inline-block;
  height: 100%;
  margin: 0 -2px;
  padding: 1rem;
  vertical-align: top;
  width: 33.33%;
}
.col:first-child {
  margin-left: 0;
}
.col:not(:first-child) {
  border-left-width: 0;
}

.blue {
  background-color: #2980b9;
}
.blue .darken {
  background-color: #20638f;
}
.blue .lighten {
  background-color: #409ad5;
}
.blue .mix {
  background-color: #2473a6;
}

.green {
  background-color: #27ae60;
}
.green .darken {
  background-color: #1e8449;
}
.green .lighten {
  background-color: #36d278;
}
.green .mix {
  background-color: #239c56;
}

.yellow {
  background-color: #f1c40f;
}
.yellow .darken {
  background-color: #c29d0b;
}
.yellow .lighten {
  background-color: #f4d03f;
}
.yellow .mix {
  background-color: #d8b00d;
}

.red {
  background-color: #c0392b;
}
.red .darken {
  background-color: #962d22;
}
.red .lighten {
  background-color: #d65548;
}
.red .mix {
  background-color: #ac3326;
}

.message {
  position: absolute;
  right: 0;
  font-family: sans-serif;
  font-size: 4rem;
  height: 100%;
  padding: 3rem;
  transform: translateY(-50%);
  padding-top: 25%;
  width: 100%;
  text-align: right;
}
.message p {
  margin: 0;
}

SassMeister-rendered.html

<div class="blue thingy">
  <div class="col lighten">
    <span class="label">Lighten</span>
  </div>
  <div class="col darken">
    <span class="label">Darken</span>
  </div>
  <div class="col mix">
    <span class="label">Mix</span>
  </div>
</div>

<div class="green thingy">
  <div class="col lighten">
    <span class="label">Lighten</span>
  </div>
  <div class="col darken">
    <span class="label">Darken</span>
  </div>
  <div class="col mix">
    <span class="label">Mix</span>
  </div>
</div>

<div class="yellow thingy">
  <div class="col lighten">
    <span class="label">Lighten</span>
  </div>
  <div class="col darken">
    <span class="label">Darken</span>
  </div>
  <div class="col mix">
    <span class="label">Mix</span>
  </div>
</div>

<div class="red thingy">
  <div class="col lighten">
    <span class="label">Lighten</span>
  </div>
  <div class="col darken">
    <span class="label">Darken</span>
  </div>
  <div class="col mix">
    <span class="label">Mix</span>
  </div>
</div>

<div class="message">
  <p>Mix is better. Always</p>
</div>