css - 较少的混合名称被评估为颜色/颜色

Question

我有一个 less 文件来定义一堆颜色/颜色。每个类名都包含相关颜色的名称，例如 .colourOrange{..} 或 .colourBorderOrange{..} 或 navLeftButtOrange{..}.

为了简单起见，我有一个使用参数名称的 mixin:colour，并使用它来命名类:

.completeColour(@colourName, @col) {
.colour@{colourName}{
    …
}
.colourBorder@{colourName}{
   …
}
.leftNavButt@{colourName}{

…… }

问题是这个正在根据相关颜色评估类的名称。因此，我在生成的 CSS 中得到 .leftNavButt#ffa500{} 而不是得到 .leftNavButtOrange{}

有没有办法用编译器参数或其他东西来阻止它。基本上我不希望参数被评估，读取但不被评估。我可以使用编译器参数来执行此操作，还是我需要更改名称以使它们不匹配诸如 myAppOrange 之类的颜色。

Answer 1

这是 Less 的遗留特性。目前，可以使用以下变通解决方案之一来克服此颜色名称到十六进制代码的转换。

.completeColour(~"Orange",1);

或

.completeColour(e("Orange"),1);

这两个选项都明确告诉编译器传递的值是字符串而不是颜色，因此 Less 编译器不会将其转换为相应的十六进制代码。

来源:

1. Less GitHub - how to avoid color name be translated into color value?
2. Less GitHub - Compilation of named colors results in hex values being used incorrectly in interpolations

更新:从版本 2.0.0 开始，如果颜色作为名称明确提及并且没有其他基于颜色的操作，则不会发生这种颜色名称到十六进制代码的转换。 2.0.0 版目前处于测试阶段。

(官方更新: V2 Upgrade Guide | 原始来源: More consistent named color variables )。