如何阻止LESS将列表中的内置颜色名称自动转换为十六进制色值？

这是因为LESS会自动识别内置的颜色关键字（比如black、white、gray这类），并将它们直接解析为对应的十六进制颜色值，而自定义的颜色名称不在内置列表中，所以能保留原始字符串形式。要阻止这种自动转换，让内置颜色名称作为类名的一部分保留下来，有两种简单有效的方法：

方法1：用引号包裹颜色名称，再去除引号使用 #

把列表中的内置颜色名用双引号包裹，将其标记为普通字符串，然后在提取时用e()函数去除引号，得到纯文本名称：

@brand-device-colors: "black" #000000, "white" #ffffff, "gray" #dddddd, customcolor #111222, customcolor2 #123123;

.make-device-colors(@i: length(@brand-device-colors)) when (@i > 0) {
    .make-device-colors(@i - 1);
    @color-array: extract(@brand-device-colors, @i);
    // 用e()去除字符串的引号，得到纯名称文本
    @device-color: e(extract(@color-array, 1));
    @device-color-code: extract(@color-array, 2);
    @device-class: ~"color-@{device-color}";
    .select-styled label {
        margin: @device-class;
    }
}
.make-device-colors();

这样编译后，black对应的类名就会是color-black，和自定义颜色的输出一致。

方法2：用~强制将颜色名转为未解析字符串 #

在颜色名前加~符号，告诉LESS不要解析这个值，直接当作普通字符串处理：

@brand-device-colors: ~"black" #000000, ~"white" #ffffff, ~"gray" #dddddd, customcolor #111222, customcolor2 #123123;

.make-device-colors(@i: length(@brand-device-colors)) when (@i > 0) {
    .make-device-colors(@i - 1);
    @color-array: extract(@brand-device-colors, @i);
    @device-color: extract(@color-array, 1);
    @device-color-code: extract(@color-array, 2);
    @device-class: ~"color-@{device-color}";
    .select-styled label {
        margin: @device-class;
    }
}
.make-device-colors();

这种方式不需要额外处理引号，~"black"会被LESS直接当作字符串black处理，不会转换为#000000。

核心原理 #

两种方法的本质都是强制将内置颜色名称标记为普通字符串，避免LESS的自动颜色值解析逻辑触发，这样就能保留原始的名称文本用于生成类名了。

内容的提问来源于stack exchange，提问作者Pascal Cloverfield