I recently saw a post from Hmphry about Useful Sass Snippets in Sass News. I thought it had some really neat ideas in it and I wanted to take a closer look at his bit on Colors.
Colors
Color management has been a nagging itch for quite a while. I find that the designs I receive to build out frequently have many color variations and I end up with many different colors defined. In the past I’ve used both variables and a mixin with a simple map to get color values based on a name. However Hmphry’s approach leverages a 2 level map which supports grouping similar colors nicely.
There is one change that I would make to his $color-stack map. In his map, Hmphry uses id as the key to lookup the specific color in a group. I think I would change that to shade as I usually expect an ID to be unique and it feels odd to have different values for a given ID in different groups.
This means that instead of this: [gist id=”2b60270c2fbc00e4b21a” file=”_colors-stack–original.scss”]
I’d have this: [gist id=”2b60270c2fbc00e4b21a” file=”_colors-stack–updated.scss”]
One other change that I think I’d make is to support updating the $color-stack via the function. This would let me define new colors right in the CSS as I go along doing a build and then I can clean them up at the end before launch so that they are all defined for maintenance. The (mostly untested) function that I’m imagining would look something like this:
[gist id=”2b60270c2fbc00e4b21a” file=”color-function.scss”]
I added some minimal testing of the _color_stack_entry helper function to verify that it was working as expected:
[gist id=”2b60270c2fbc00e4b21a” file=”color-stack-entry-test.scss”]
I plan to take a deeper look at true in a future post and add testing for the main color function.
Update
I fleshed out the tests a bit to verify that the color function was working as expected and fixed some errors I encountered in managing the color stack. You can see the whole thing in this Sassmeister: