selector string interpolation converts color keywords to hex

[neonstalwart]

while adding the test for #691, i found a possible bug.

@theme: red;
~".@{theme}" {
  color: red;
}

produces

.#ff0000 {
  color: red;
}

when i would have hoped it would be

.red {
  color: red;
}

[Kalyse]

Because red is a color and you aren't interpetting it as a string, it is falling back to any of the colors contained in less/tree/colors.js.

The fix, should be to replace

@theme: red;

with

@theme: "red";

ie here:

@theme: "red";
.theme {
        color: ~"@{theme}";
}

[neonstalwart]

thanks @Kalyse. your example is a little bit different but your suggestion is right.

@theme: "red";
~".@{theme}" {
  color: red;
}

gives me what i was expecting. thanks.

[vectorjohn]

This is still a bug. The syntax suggested by Kalyse won't work with nested rules using the & combinator.
E.g.:

@color: "red"

.something {
  ~( "&.color-@{color}" )
}

This inserts a literal & into my selector. Every other possible location for the & is a syntax error.

I can do exactly what I want if my variable value happens to not be one of the colors by leaving the quotes off of the variable value, i.e. @color: myred. Is there some reason I shouldn't be able to do that?

[vectorjohn]

Nevermind, it looks like what I really found was Issue #864

[lukeapage]

Yes... Do this..

@a: ~"red";
&@{a} {
}

Should work in 1.3.1