Creating Color Classes

_color-classes.scss

// ----
// Sass (v3.3.0.rc.2)
// Compass (v1.0.0.alpha.17)
// ----

// Base Colors

$primary   					: #00c169;
$secondary 					: #1b95ee;
$tertiary  					: #F3bc4e;
$quadrary  					: #F36359;

// Light

$primary-light   		: #00d376;
$secondary-light 		: #0ca4f7;
$tertiary-light 		: #ffc758;
$quadrary-light  		: #ff6f61;

// Lighter

$primary-lighter   	: #00dd7e;
$secondary-lighter 	: #39b7fd;
$tertiary-lighter 	: #ffd76a;
$quadrary-lighter 	: #ff8673;

// Dark

$primary-dark   		: #00af60;
$secondary-dark 		: #0f86de;
$tertiary-dark 			: #e8af3b;
$quadrary-dark  		: #e45146;

// Darker

$primary-darker   	: #009f59;
$secondary-darker 	: #0270c3;
$tertiary-darker 		: #e0a11a;
$quadrary-darker  	: #d04940; 


$colors:      $primary   $primary-light    $primary-lighter    $primary-dark    $primary-darker
              $secondary $secondary-light  $secondary-lighter  $secondary-dark  $secondary-darker
              $tertiary  $tertiary-light   $tertiary-lighter   $tertiary-dark   $tertiary-darker
              $quadrary  $quadrary-light   $quadrary-lighter   $quadrary-dark   $quadrary-darker;
              
$color-names: primary    primary-light     primary-lighter     primary-dark     primary-darker
              secondary  secondary-light   secondary-lighter   secondary-dark   secondary-darker
              tertiary   tertiary-light    tertiary-lighter    tertiary-dark    tertiary-darker
              quadrary   quadrary-light    quadrary-lighter    quadrary-dark    quadrary-darker;

@for $i from 1 through length($colors) {
  .#{nth($color-names, $i)},
  %#{nth($color-names, $i)} {
    color: nth($colors, $i);
  }
  .bg-#{nth($color-names, $i)},
  %bg-#{nth($color-names, $i)} {
    background: nth($colors, $i);
  }
}

color-classes.css

.primary {
  color: #00c169;
}

.bg-primary {
  background: #00c169;
}

.primary-light {
  color: #00d376;
}

.bg-primary-light {
  background: #00d376;
}

.primary-lighter {
  color: #00dd7e;
}

.bg-primary-lighter {
  background: #00dd7e;
}

.primary-dark {
  color: #00af60;
}

.bg-primary-dark {
  background: #00af60;
}

.primary-darker {
  color: #009f59;
}

.bg-primary-darker {
  background: #009f59;
}

.secondary {
  color: #1b95ee;
}

.bg-secondary {
  background: #1b95ee;
}

.secondary-light {
  color: #0ca4f7;
}

.bg-secondary-light {
  background: #0ca4f7;
}

.secondary-lighter {
  color: #39b7fd;
}

.bg-secondary-lighter {
  background: #39b7fd;
}

.secondary-dark {
  color: #0f86de;
}

.bg-secondary-dark {
  background: #0f86de;
}

.secondary-darker {
  color: #0270c3;
}

.bg-secondary-darker {
  background: #0270c3;
}

.tertiary {
  color: #f3bc4e;
}

.bg-tertiary {
  background: #f3bc4e;
}

.tertiary-light {
  color: #ffc758;
}

.bg-tertiary-light {
  background: #ffc758;
}

.tertiary-lighter {
  color: #ffd76a;
}

.bg-tertiary-lighter {
  background: #ffd76a;
}

.tertiary-dark {
  color: #e8af3b;
}

.bg-tertiary-dark {
  background: #e8af3b;
}

.tertiary-darker {
  color: #e0a11a;
}

.bg-tertiary-darker {
  background: #e0a11a;
}

.quadrary {
  color: #f36359;
}

.bg-quadrary {
  background: #f36359;
}

.quadrary-light {
  color: #ff6f61;
}

.bg-quadrary-light {
  background: #ff6f61;
}

.quadrary-lighter {
  color: #ff8673;
}

.bg-quadrary-lighter {
  background: #ff8673;
}

.quadrary-dark {
  color: #e45146;
}

.bg-quadrary-dark {
  background: #e45146;
}

.quadrary-darker {
  color: #d04940;
}

.bg-quadrary-darker {
  background: #d04940;
}