The background–colors for these five demo color–scales, together, encircle the complete color–gamut, each scale in twelve steps (of six degrees) incremental hue–value from one base–color, made with Sass mixins.
A well–tried way of using color in web–development is adjusting the temperature, lightness and saturation from a (colorscheme–)color, for a specific text–, background–, or border–color. Using Sass for this common use–case can, (besides speeding up the process) make the logic behind the making of color–variations from a colorscheme clearer, because the origin of the chosen color–value, in relation to the colorscheme, is right there in the declaration. Also having mixins available for this, can compress the code you have to write.
Consider the Sass source code for the p.note from above:
.note {
@include bg-warmer-2($base16-green,$sat:-15,$light:45);
border: 1px solid adjust-color($base16-cyan,
$hue:-5,
$saturation:-15,
$lightness:30);
}
The first declaration is including the Sass mixin for the background–color, and the second is a similar declaration for the border, but not abstracted away in a mixin.
Sass mixin example:
@mixin bg-warmer-2($scale-tonic,$hu:12,$sat:0,$light:0) {
background-color: adjust-color($scale-tonic,
$hue:$hu:
$saturation:$sat,
$lightness:$light)
}
These mixins are really flexible, because when the six–degree–hue–step is to big, one can adapt it with the $hue variable:
@include fg-tonic($base16-orange,$hu:-3,$sat:5,$light:-5);
}
Advantage is to have a way to integrate the adjust-color function in a workflow, for this allows you to keep the colors vivid, instead of white-washing or dulling it as you do when mixin colors with white or black, like in lighten tint darken or shade functions.
Taking this a step further would be making mixins for modules, complete with gradients, borders, box–shadow etc.; which will make sense as long as the code is reusable.
Recommended video by Brandon Mathis: faster color theming with Compass and Sass