Generated by SassMeister.com.

SassMeister-input-HTML.html

<div class="div1"><span>dark-02</span></div>
<div class="div2"><span>dark-01</span></div>
<div class="div3"><span>base</span></div>
<div class="div4"><span>light-01</span></div>
<div class="div5"><span>light-02</span></div>

SassMeister-input.scss

// ----
// libsass (v3.2.5)
// ----

$color-pregnancy: #0192d3;
$color-pregnancy-dark: darken($color-pregnancy, 4);
$color-pregnancy-darker: darken($color-pregnancy, 8);
$color-pregnancy-light: desaturate(lighten($color-pregnancy, 17), 29);
$color-pregnancy-lighten: desaturate(lighten($color-pregnancy, 40), 32);

$color-set: $color-pregnancy-darker $color-pregnancy-dark $color-pregnancy $color-pregnancy-light $color-pregnancy-lighten;
@each $color in $color-set {
  $i: index($color-set, $color);
  .div#{$i} {
    background-color: $color;
    &:after {
      content: "#{$color}";
      position: absolute;
      bottom: -20px;
      left: 5px;
    }
  }
}

div {
  display: table-cell;
  position: relative;
  width: 150px;
  height: 50px;
  span {
    position: absolute;
    bottom: -40px;
    left: 5px;
  }
}

SassMeister-output.css

.div1 {
  background-color: #0176aa;
}

.div1:after {
  content: "#0176aa";
  position: absolute;
  bottom: -20px;
  left: 5px;
}

.div2 {
  background-color: #0184bf;
}

.div2:after {
  content: "#0184bf";
  position: absolute;
  bottom: -20px;
  left: 5px;
}

.div3 {
  background-color: #0192d3;
}

.div3:after {
  content: "#0192d3";
  position: absolute;
  bottom: -20px;
  left: 5px;
}

.div4 {
  background-color: #4bb2df;
}

.div4:after {
  content: "#4bb2df";
  position: absolute;
  bottom: -20px;
  left: 5px;
}

.div5 {
  background-color: #b0dcf0;
}

.div5:after {
  content: "#b0dcf0";
  position: absolute;
  bottom: -20px;
  left: 5px;
}

div {
  display: table-cell;
  position: relative;
  width: 150px;
  height: 50px;
}

div span {
  position: absolute;
  bottom: -40px;
  left: 5px;
}

SassMeister-rendered.html

<div class="div1"><span>dark-02</span></div>
<div class="div2"><span>dark-01</span></div>
<div class="div3"><span>base</span></div>
<div class="div4"><span>light-01</span></div>
<div class="div5"><span>light-02</span></div>