css - 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 both.

I might find a workaround for my particular case, I’m just asking if this is this expected behaviour, or if there is a fault in my reasoning? Any insight appreciated.

For example here, the color is created from an evaluated string; note the 'missing' # in the hex value that gets added later :

.broken-mixin(@hexcode: '9719e1') {

    @color: e("#@{hexcode}");

    // this works as expected
    background-color: @color;

    // this does work too
    .very-simple-mixin(@color);

    // Undefined_methodError: error evaluating function `fade`: 
    // Object #<Object> has no method 'toHSL'
    background-color: fade(@color,30%);

    // SyntaxError: error evaluating function `red`: 
    // Cannot read property '0' of undefined
    background-color: rgba(red(@color), green(@color), blue(@color), 0.5);

}

Otherwise built-in functions work normally work with variables in mixins, for example :

.mixin-works(@myColor: #00ff00) {
    // works just fine
    background-color: fade(@myColor,30%);
    // or this, works too
    background-color: rgba(red(@myColor), green(@myColor), blue(@myColor), 0.5);
}

What am I missing ?

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.