Generated by SassMeister.com.

SassMeister-input-HTML.jade

.group
  .swatch-red-base
  .swatch-red-med
  .swatch-red-dark

.group
  .swatch-blue-base
  .swatch-blue-med
  .swatch-blue-dark

SassMeister-input.scss

// ----
// libsass (v3.1.0)
// ----

$red: #DC1432;
$blue: #006699;

$color-scale: 10%;

$palette: (
  red: (
    base: $red,
    med: darken($red, $color-scale),
    dark: darken($red, $color-scale*2)
  ),
  blue: (
    base: $blue,
    med: darken($blue, $color-scale),
    dark: darken($blue, $color-scale*2)
  )
);

%swatch {
  width: 100px;
  height: 100px;
  font-family: "Helvetica";
  margin: 0 18px;
}

.group {
  width: 200px;
  float: left;
}

@each $group, $colors in $palette {
    @each $color, $value in $colors {
      .swatch-#{$group}-#{$color} {
        @extend %swatch;
        background-color: $value;
        &:after {
          position: relative;
          content: "#{$value} #{$group}-#{$color}";
          color: $value;
          left: 110px;
          top: 40%;
          text-transform: uppercase;
        }
      } 
    }
}

SassMeister-output.css

.swatch-red-base, .swatch-red-med, .swatch-red-dark, .swatch-blue-base, .swatch-blue-med, .swatch-blue-dark {
  width: 100px;
  height: 100px;
  font-family: "Helvetica";
  margin: 0 18px; }

.group {
  width: 200px;
  float: left; }

.swatch-red-base {
  background-color: #DC1432; }
  .swatch-red-base:after {
    position: relative;
    content: "#DC1432 red-base";
    color: #DC1432;
    left: 110px;
    top: 40%;
    text-transform: uppercase; }

.swatch-red-med {
  background-color: #ad1027; }
  .swatch-red-med:after {
    position: relative;
    content: "#ad1027 red-med";
    color: #ad1027;
    left: 110px;
    top: 40%;
    text-transform: uppercase; }

.swatch-red-dark {
  background-color: #7f0b1d; }
  .swatch-red-dark:after {
    position: relative;
    content: "#7f0b1d red-dark";
    color: #7f0b1d;
    left: 110px;
    top: 40%;
    text-transform: uppercase; }

.swatch-blue-base {
  background-color: #006699; }
  .swatch-blue-base:after {
    position: relative;
    content: "#006699 blue-base";
    color: #006699;
    left: 110px;
    top: 40%;
    text-transform: uppercase; }

.swatch-blue-med {
  background-color: #004466; }
  .swatch-blue-med:after {
    position: relative;
    content: "#004466 blue-med";
    color: #004466;
    left: 110px;
    top: 40%;
    text-transform: uppercase; }

.swatch-blue-dark {
  background-color: #002233; }
  .swatch-blue-dark:after {
    position: relative;
    content: "#002233 blue-dark";
    color: #002233;
    left: 110px;
    top: 40%;
    text-transform: uppercase; }

SassMeister-rendered.html

<div class="group">
  <div class="swatch-red-base"></div>
  <div class="swatch-red-med"></div>
  <div class="swatch-red-dark"></div>
</div>
<div class="group">
  <div class="swatch-blue-base"></div>
  <div class="swatch-blue-med"></div>
  <div class="swatch-blue-dark"></div>
</div>