Search code examples
csslessdotless

Why does LESS convert #fff to white?

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?

Solution

  • 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.