Defining application color helpers with Sass

I'm a huge fan of single-line "utility" classes in CSS. They make writing your HTML faster and also mean that components are less likely to affect other parts of the system.

Here's how I recently re-organized Assembly's color helpers to take advantage of this style.

$white:  #FFF;
$black:  #353941;

$gray-lighter: #F4F4F5;
$gray-light:   #ECEDEF;
$gray:          #C2C7D0;
$gray-dark:    #8B909A;
$gray-darker:  #666D78;

$green:        #33D6A6;
$blue:         #338EDA;
$red:          #EC3750;
$yellow:       #F2D930;

$colors: (
  white: $white,
  black: $black,

  gray-lighter: $gray-lighter,
  gray-light: $gray-light,
  gray: $gray,
  gray-dark: $gray-dark,
  gray-darker: $gray-darker,

  green: $green,
  blue:  $blue,
  red:   $red,
  yellow: $yellow
);

@each $name, $value in $colors {
  .#{$name}        { color: $value }
  .bg-#{$name}     { background-color: $value }
  .border-#{$name} { border-color: $value }
  .fill-#{$name}   { fill: $value }
  .stroke-#{$name} { stroke: $value }

  .#{$name}-hover:hover        { color: $value }
  .bg-#{$name}-hover:hover     { background-color: $value }
  .border-#{$name}-hover:hover { border-color: $value }
  .fill-#{$name}-hover:hover   { fill: $value }
  .stroke-#{$name}-hover:hover { stroke: $value }
}

I'm not generally a fan of some of SCSS' features, but looping over color maps like this definitely reduces surface area for possible mistakes.