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?

Cypripedium

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. – Hest

I don't know why less is doing this but colours aren't faster than hex. See link – Mendy

SASS has the same problem. It's due to the way the CSS spec is implemented and color names can be compressed. 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. – Zinazinah

github.com/sass/sass/issues/363 – Diella

@Hest #00FA9A converts to mediumspringgreen. – Cypripedium

@Mendy Thanks for the link, now I'm even more confused as to why this is happening! – Cypripedium

@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. – Hest

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. – Pashalik

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?) – Spic

@Spic 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. – Cypripedium

@Curt: Yes, it seems to be. Look at this GitHub page which lists differences between Dotless and Less.js. They are calling it color compression. Note: Although, the second statement seems contradictory with the first. – Pashalik

isnt the question rather why not convert it ? it shouldnt make any difference for you – Kelcie

@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). – Spic

@Pashalik 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 :) – Cypripedium

@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. – Pashalik

Answer 1

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:

1. 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.
2. 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.
3. The color keyword to hex code mapping seems to be maintained in Color.cs source file.
4. 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.

Pashalik