each directive to print out color values and variable names

app.scss

.color {
  &--fill {
    border-radius: .5rem;
    width: 8.5rem;
    height: 3rem;
    position: relative;
    &::after {
      content: "";
      position: absolute;
      width: 0;
      height: 0;
      margin: auto;
      bottom: -1.20rem;
      left: 0;
      right: 0;
      text-indent: -24.5%;
      text-transform: lowercase;
      line-height: 2;
      border-left: 1.25rem solid transparent;
      border-right: 1.25rem solid transparent;
      font-weight: 700;
      font-family: Menlo, monospace;
    }
  }
  &--container {
    display: inline-block;
    vertical-align: top;
    margin: .25rem;
    text-align: center;
    min-height: 6.5rem;
  }
  $colors: offwhite $offwhite, black $black, red $red, blue $blue, yellow $yellow, green $green, gray $gray, text $text, orange $orange, bluegreen $bluegreen, purple $purple, fushia $fushia, ygreen $ygreen;
  @each $color in $colors {
    &--fill_#{"" +nth($color, 1)} {
      background: nth($color, 2);
      &::before {
        content: "$#{"" +nth($color, 1)}";
        color: white;
        font-weight: 700;
        position: absolute;
        top: 0; bottom: 0; left: 0; right: 0;
        padding: .75rem;
        text-align: center;
        width: 100%;
      }
      &::after {
        content: "#{nth($color, 2)}";
        border-top: 1.25rem solid nth($color, 2);
      }
    }
  }
}