Color Stack Mixin

colorStack.scss

$color-stack:
	(group: orange, id: normal, color: #e67835),
	(group: orange, id: pale, color: #f8a878),
	(group: orange, id: dark, color: #ad490c),
	(group: blue, id: normal, color: #426682);

// Color  Function
@function color($group, $shade:normal, $transparency:1){
  @each $color in $color-stack{
    $c-group: map-get($color, group);
    $c-shade: map-get($color, id);
    @if($group == map-get($color, group) and $shade == map-get($color, id)){
      @return rgba(map-get($color, color), $transparency);
    }
  }
}


// Usage:
body{
  color: color(blue, normal,.8);
}

p{
  color: color(orange);
}

blockquote{
  color: color(blue);
  background: color(orange, pale,.4);
  border-color: color(orange, dark);
} */

Notes

Group: Group will be what you want it called, for instance: orange, blue, or even something silly like Megatron. This field is not unique to the color.

ID: This is the color's unique identifier. So, a pale orange would be 'pale', Megatron's steel would be 'steel'. Normal is the default entry, so it's a good idea to keep the id for your default marked as 'normal'. This field is unique to the group. Do not repeat in the same group.

Color: This is where you put the hex of the color.