Small utility for building colour classes.

_colors.scss

// Define default background and foreground (text) colors:
$background-color: #fff;
$foreground-color: #222;

// Define our brand colors; text-color accepts a color, 'inverse', 'default', or false.
// e.g.:

// (
//   prefix,
//   brand-color,
//   text-color
// )
$brand-colors: ( 
  (
    '1', 
    'blue',
    '#c00'
  ),(
    '2', 
    '#c00', 
    'inverse'
  ),(
    '3', 
    'yellow',
    false
  )
);

// Outputs a background and text color class for each color in the list.
// e.g.:
 
// .br-bg--1 {
//   background-color: blue!important;
//   color: #c00!important;
// }

// .br-c--1 {
//   color: blue!important;
// }
@mixin build-colors($colors, $prefix) {
  @each $color in $colors {
    $postfix:     unquote(nth($color, 1));
    $brand-color: unquote(nth($color, 2));  
    $text-color:  unquote(nth($color, 3));
  
    %#{$prefix}-bg--#{$postfix},
    .#{$prefix}-bg--#{$postfix} {
      background-color: $brand-color +!important;
    
      @if ($text-color == 'inverse') {
        color: $background-color +!important;
      } @else if ($text-color == 'default') {
        color: $foreground-color +!important;
      } @else if ($text-color != false) {
        color: $text-color +!important;
      }
    }
      
    %#{$prefix}-c--#{$postfix},
    .#{$prefix}-c--#{$postfix} {
      color: $brand-color +!important;
    }
  }
}

// Build our classes.
@include build-colors($brand-colors, 'br');