_classes.scss

/**
 * Export helpers to use all available colors.
 * `color` prefix will fill `color` property, `bg-color` will fill
 * `background-color`.
 *
 * 1. Map with all color names and values (hexa code).
 * 2. Loop through all colors and export them as classes.
 **/
$colors: ( // [1]
  'magenta': $color-magenta,
  'light-gray': $color-light-gray,
  'lighter-gray': $color-lighter-gray,
  'medium-gray': $color-medium-gray,
  'gray': $color-gray,
  'dark-gray': $color-dark-gray,
  'darker-gray': $color-darker-gray,
  'black': $color-black,
  'white': $color-white,
  'light-blue': $color-light-blue,
  'yellow': $color-yellow,
  'red': $color-red,

  // Export carrier colors as well
  't-mobile': $color-magenta,
  'verizon': $color-red,
  'at-t': $color-light-blue,
  'sprint': $color-yellow,
  'transparent': transparent
);

@each $color, $code in $colors { // [2]
  .u-color-#{$color} {
    color: $code !important;
  }

  .u-bg-color-#{$color} {
    background-color: $code !important;
  }
}