Variable containing color name gets converted to hex-code in compressed mode

[drublic]

When using a variable as for example $branding-font and it contains a color name as for example Black (capital first letter) it is converted to #000 in compressed mode and to black in default, extended and compact mode.

This can become a problem if you want to use for example Arial Black as a font in a font-stack as this one:

$branding-font: Arial Black, sans-serif;

A temporary workaround is to use quotes for the color: "Arial Black". Sass leaves these untouched.

I've implemented an overview. You can find the according Sass files here, here, here and here.
Please just have a look at the source code.

My Sass version is Sass 3.2.9. Haven't tested against 3.3 or anything else.

[cimmanon]

The font Arial Black should be in quotes anyway, as per the CSS specification.

https://www.w3.org/TR/2008/REC-CSS2-20080411/fonts.html#font-family-prop

Font family names containing whitespace should be quoted.

[chriseppstein]

What @cimmanon says is true. However with custom fonts, it's possible to define a font family that is also a color name, which would reproduce this issue without that technicality.

We have, so far, refused to implement property-aware value parsing -- which is something that CSS does and lets them get away with this. We do this because it would mean that the value of a variable has different meanings in different property contexts, which is highly unusual from a programming perspective.

Note, that if you were not using an intervening variable, you would not have this issue, because Sass wouldn't parse the value as SassScript, it would just capture a string and pass it along.

So this is one of those cases, where you need to do things slightly differently than you might expect by knowing CSS so that lots of other expectations regarding software behavior are met.

[drublic]

Thanks for explaining this issue in detail, Chris.

Would it make any sense to document this behavior of SassScript somewhere in the official docs just in case someone else stumbles upon it?