Generating Color Utility Classes in SASS

generative-utility-colors.sass

$color-list {
  red   #f00,
  green #0f0,
  blue  #00f
}

@each $value in $color-list {
  .#{nth($value, 1)} {
    color: nth($value, 2);
  }

  .bg-#{nth($value, 1)} {
    background-color: nth($value, 2);
  }

  .border-#{nth($value, 1)} {
    border-color: nth($value, 2);
  }
}

headline.html

<h1 class="h1 bold blue sans-serif">Headline</h1>

utility-colors.sass

$white: #fff;

.white {
  color: $white;
}

.bg-white {
  background-color: $white;
}

.border-white {
  border-color: $white;
}