Why does LESS convert #fff to white?

Question

If I have:

.foo
{
   background-color:#fff;
}

LESS converts this to:

.foo
{
    background-color:white;
}

Why is this? Do browsers process named colours faster than HEX values?

I'm implementing LESS using dotless. Could this be carrying out the conversion? And if so why?

Does it, for example, convert `#00FA9A` to `MediumSpringGreen`? If not I'd argue they made a few exceptions for the benefit of the human reader. — Tomalak, Sep 03 '14 at 09:37
I don't know why less is doing this but colours aren't faster than hex. See [link](http://stackoverflow.com/questions/6640575/which-one-is-faster-hex-color-codes-or-color-names) — Christoph, Sep 03 '14 at 09:38
SASS has the same problem. It's due to the way the CSS spec is implemented and color names can be compressed. https://github.com/sass/sass/issues/343 I can't find anything definite, but there is a nice thread above that explains why it is done this way. — Chris Spittles, Sep 03 '14 at 09:39
@Christoph Thanks for the link, now I'm even more confused as to why this is happening! — Curtis, Sep 03 '14 at 09:41
@Curt Well then I'd argue somebody has lived out their OCD and implemented a conversion for the named color table just because it exists. I cannot think of a good *technical* reason to convert hex to names. — Tomalak, Sep 03 '14 at 09:44
Which version of Less are you using? For me, it doesn't convert hex values to color names. It would actually do the reverse when we assign `white` to a variable and use it for a property. [CodePen Sample](http://codepen.io/hari_shanx/pen/oIKhc). — Harry, Sep 03 '14 at 10:47
The official Less compiler never did that (and I doubt any of Less compilers family does this too... Hmm, are you sure it's Less and not some other tool in your build chain?) — seven-phases-max, Sep 03 '14 at 11:41
@seven-phases-max Ah, I'm using dotless to implement this in my ASP.NET MVC application. I didn't consider that this might be doing the conversion. — Curtis, Sep 03 '14 at 14:11
@Curt: Yes, it seems to be. Look at [this GitHub page](https://github.com/dotless/dotless/wiki/Less-js-differences#color-compression) which lists differences between Dotless and Less.js. They are calling it color compression. *Note:* Although, the second statement seems contradictory with the first. — Harry, Sep 03 '14 at 14:15
isnt the question rather why not convert it ? it shouldnt make any difference for you — john Smith, Sep 03 '14 at 14:22
@Curt: Yep, I see now you're right and `dotless` does this actually. Though there were some talks in a discussion list about changing this behavior. I can't find dotless release notes anywhere but it's possible they have fixed this in v1.4.0 or 1.4.1 (unless you're already using one of those and they still have not). — seven-phases-max, Sep 03 '14 at 14:25
@Harry Thanks for the link, exactly what I was after. So the answer to my question is "In dotless we *favour* the color keyword". I don't think this as Christoph pointed out earlier this is worse for performance. So its odd they would enforce this. Please write an answer so I can accept it :) — Curtis, Sep 03 '14 at 15:06
@Curt: Just out of curiosity, did you happen to come across any further information outside of SO on this item? Asking because I wasn't lucky. Please do not mistake this as pestering for acceptance. — Harry, Sep 09 '14 at 08:22

score 3 · Accepted Answer · edited Jun 20 '20 at 09:12

Differences between less.js and dotless

Color compression

In dotless we favour the color keyword over the hex code, if one matches. When compressing it chooses whichever is shorter.. e.g. #FFF, #FFFFFF, white then #FFF will be chosen, but in the case of red, the keyword red will be used.

In less.js every colour is replaced with a hex code.

The above quote is from the official Dotless GitHub page.

Notes:

The second part of that quote sounds a bit contradictory to the first one but I think the first statement is clear enough on the expected behavior.
As pointed out by seven-phases-max in his comment they were planning to fix this and as per Issue #332's log the DisableColorCompression flag has already been added to disable this compression.
The color keyword to hex code mapping seems to be maintained in Color.cs source file.
Issue 317 and Issue 168 are two other similar issues which are still in open status, so I am not sure if the DisableColorCompression flag addresses the hex code to color name conversion item fully.

Why does LESS convert #fff to white?

1 Answers1

Differences between less.js and dotless