Question

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

我可能会找到针对我的特定情况的解决方法，我只是问这是否是这种预期行为，或者我的推理是否存在错误？任何洞察力都赞赏。

例如，此处，颜色是从评估的字符串创建的;注意“失踪”＆＃39;后面添加的十六进制值中的#：

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

}

其他内置函数可以正常使用mixins中的变量，例如：

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

<强>褪色

设置颜色的绝对透明度。可以应用于颜色，无论它们是否已具有不透明度值。

<强>参数：

color：一个颜色对象。

金额：百分比0-100％。

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

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

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

其他内置函数也没有出于同样的原因（也就是说，它们期望color个对象作为输入。

<强>红色

提取颜色对象的红色通道。

参数：颜色 - 颜色对象。

内置函数不使用评估字符串，为什么？

1 个答案: