Thoughts on “Useful Sass Snippets – Colors”

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:

$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);

I’d have this:

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

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:

I added some minimal testing of the _color_stack_entry helper function to verify that it was working as expected:

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:

Play with this gist on SassMeister.