Less不支持contrast()函数，直接使用会报错；应采用luma公式（0.2126R+0.7152G+0.0722*B）归一化计算亮度，再用if()判断阈值（如0.55）选择黑或白文字色。
Less中直接用contrast()函数会报错
Less本身不提供contrast()函数——这是Sass的内置函数，不是CSS标准，也不是Less原生支持的。你在Less里写contrast(@bg, #000, #fff)，编译时会直接抛出Unrecognised input或Function contrast is undefined错误。
原因很简单：Less的函数生态比Sass保守，它只实现了lighten()、darken()、hsl()等基础颜色操作，没有自动对比度判断逻辑。想实现“背景深则文字白、背景浅则文字黑”，得自己建模。
手动实现对比度判断：用luma()公式 + if()条件分支
最可靠的方式是基于相对亮度（luma）计算：对任意RGB色值，按0.2126 * R + 0.7152 * G + 0.0722 * B加权求和（归一化到0–1），再与阈值（通常0.5–0.6）比较。Less虽无contrast()，但支持if()、rgb()、red()/green()/blue()等提取函数，足够拼出逻辑。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 把颜色转成
rgb()格式再取通道值，避免#fff或white这类命名色导致red()返回NaN - 用
unit()确保所有通道值被当作数字参与运算（Less对颜色通道返回的是带单位的值，如255px） - 阈值设为
0.55比0.5更稳妥——纯灰#808080的luma≈0.5，但人眼在中灰上对黑白都易疲劳，略偏亮侧更可读
示例函数定义：
.text-color-for-bg(@bg) {
@r: unit(red(rgb(@bg)), '');
@g: unit(green(rgb(@bg)), '');
@b: unit(blue(rgb(@bg)), '');
@luma: (0.2126 * @r + 0.7152 * @g + 0.0722 * @b) / 255;
color: if(@luma > 0.55, #000, #fff);
}遇到渐变背景或半透明色怎么办
contrast()逻辑本质依赖单一确定的背景色，而渐变（linear-gradient）或rgba(0,0,0,0.3)无法直接喂给red()/green()——Less解析失败，或返回0。
这不是函数写得不对，而是问题边界变了：你没法从CSS渐变字符串里算出一个“代表色”。此时必须换策略：
- 放弃自动推导，改用设计约定：比如所有
.card--primary配深字，.card--inverted配浅字，用类名显式控制 - 若必须动态，把“背景主色”抽成变量（如
@card-bg-base: #4a6fa5），再用上面的.text-color-for-bg()算文字色，渐变/透明效果另加伪元素或覆盖层实现 - 慎用
mix()模拟叠加效果（如mix(@bg, white, 30%)），它不等于真实alpha混合，尤其在深色底+高透明时偏差明显
编译后CSS体积和维护成本容易被低估
每次调用.text-color-for-bg(@color)，Less都会把整套luma计算逻辑内联进生成的CSS——哪怕@color是相同值，也不会去重。10个组件各调一次，就重复10份加权公式。
更麻烦的是可维护性：如果哪天想把阈值从0.55调成0.58，得全局搜替换，还可能漏掉写死在选择器里的color: #000。
所以实际项目中，更轻量的做法是预设几档色系：
-
@theme-dark-bg: #1a1a1a;→ 固定配#eee -
@theme-light-bg: #f8f9fa;→ 固定配#212529 - 中间色统一走
@theme-accent并人工指定文字色，不强求全自动
自动推导适合工具链或设计系统底层，业务代码里过度追求“智能”反而增加隐性理解成本。
