Color helpers don't work when map keys are CSS colors

[cmalven]

Just discovered something really dumb and frustrating:

If you use unquoted color names as keys in a SASS map, Sass will always automatically convert that name to a hexidecimal value any time it is output.

$colors: (
  black: #191919, // This one will cause issues
  dark-black: #0d0d0d, // This one won't, because there is no "dark-black" css color
);

Therefore, when we output the helper classes for the above, we will end up with the following:

.h-color-text-#000{color:#191919}
.h-color-bg-#000{background-color:#191919}
.h-color-text-dark-black{color:#0d0d0d}
.h-color-bg-dark-black{background-color:#0d0d0d}

To make things even more confusing, Sass will only do this when the output mode is compressed, otherwise it will work just fine.

This is stupid and maddening to me beyond belief, and I haven't been able to find a simple way to prevent sass from doing this. The "official" suggestion from the Sass team is to quote your map values like so:

$colors: (
  'black': #191919,
  'dark-black': #0d0d0d
);

But I'm not really willing to do that to solve such a dumb problem. @brianjhanson do you have any ideas about how to sidestep this?

[brianjhanson]

I usually sidestep it by naming my variables with reverse and something like text rather than white and black. I also always prefer more abstract color names to give a bit more flexibility for black to be not actual black and white to be not actual white.

[cmalven]

To me, having only a text to refer to black doesn't scale very well. What name do you use for things that should be a specific shade of black (and probably the same shade of black as text) but aren't text?

[brianjhanson]

I always use Sip and the names it gives to colors. You can see what kinds of names it gives in the Palettes section of the Features page.

Basically to follow this idea you can also use something like Name that color to generate color names.

[cmalven]

That's a cool app! But I just used Sip and Name that color to select a color that was #000000 and they both chose the name Black

And the David Walsh approach is also to name your colors with the most standard names possible. So none of these actually work around the Sass issue. And definitely not foolproof and requires a lot of knowledge about how the setup and sass work.

[brianjhanson]

I really haven't run into the issue with it renaming anything other than white and black (which I always just rename to "reverse" and "text") but I also don't use the helper color classes very much, so it's possible I've just never noticed.

It feels like the best solution is the dumb one. It really seems like the simplest solution. Probably better practice to quote all the key names anyways.

Another option would be to output Sass in a format other than Compressed and use something else to minify the CSS.

[cmalven]

Yeah, I don't use the color helpers almost ever, which is probably why we've never noticed this happening before. Maybe I'll experiment with minifying separately from sass, but probably not worth it.