Built-in functions not working with evaluated strings, why?

Question

It seems that evaluated color strings are not working with some built-in LESS functions. I have tried using e() and ~\"\" and any combination of bo

Answer 1

Quoting the LESS website's Function Reference:

fade

Set the absolute transparency of a color. Can be applied to colors whether they already have an opacity value or not.

Parameters:

color: A color object.

amount: A percentage 0-100%.

The fade function requires a color object as input to it and hence passing an evaluated string as a parameter to the function doesn't work.

It can be solved by using the built-in color function which converts a string into an equivalent color object like below:

background-color: fade(color("@{color}"),30%);

The other built-in functions also are not working for the same reason (that is, they expect a color object as an input).

red:

Extracts the red channel of a color object.

Parameters: color - a color object.