A small Sass library for managing colors and their variations throughout a project

Everything SCM does is based on two maps: one for colors and one for variants. It provides a function to get any color in any pre-set variant:

.element {
  color: scm(red, dark);
}

To add a color, use the scm-add-color() mixin. It needs two arguments: a label for the color and its hex value:

@include scm-add-color(brand-blue, #205D84);

To add a variant, use the scm-add-variant() mixin. It takes three arguments: a label for the variant, the name of the Sass color function it uses, and the parameters for that function:

@include scm-add-variant(fade, rgba, .7);
@include scm-add-variant(dark, darken, 10%);
@include scm-add-variant(blueish, mix, (blue, 10%));

In your Sass, use the function scm(color, variant) anywhere you can put a CSS color:

.test {
  color: scm(red, dark);
  border: 3px solid scm(orange, fade);
  
  &:hover {
    color: scm(red);
    border-color: scm(orange, light);
  }
}