css - 内置函数不适用于评估的字符串，为什么？

Question

似乎评估的颜色字符串不适用于某些内置的 LESS 函数。我试过使用 e() 和 ~"" 以及两者的任意组合。

我可能会为我的特定情况找到解决方法，我只是想问一下这是否是预期的行为，或者我的推理是否有错误？任何见解表示赞赏。

例如，颜色是从评估的字符串创建的；请注意稍后添加的十六进制值中的“缺失”#:

.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);

}

否则内置函数通常与混合中的变量一起工作，例如:

.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);
}

我错过了什么？

Answer 1

引用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%.

fade 函数需要一个 color 对象作为输入，因此将计算后的字符串作为参数传递给函数是行不通的。

可以使用内置的color来解决将字符串转换为等效的 color 对象的函数，如下所示:

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

出于同样的原因，其他内置函数也无法正常工作(也就是说，它们需要一个 color 对象作为输入)。

red:

Extracts the red channel of a color object.

Parameters: color - a color object.