Less颜色函数不支持CSS变量（如var(--x)）作为参数，因其运行时求值与Less编译期计算存在生命周期错位；正确做法是用Less变量（如@primary-color）在编译期计算衍生色，再导出为CSS变量。
Less函数里直接用var(--x)会报错或编译失败
Less的lighten()、darken()、contrast()等颜色函数只认静态值或Less变量，不接受CSS变量（var(--primary-color)）作为输入——因为CSS变量是运行时求值，而Less函数在编译期就要算出结果。你写lighten(var(--primary-color), 10%)，Less会直接报error: operation on an invalid type，连编译都过不去。
- 别把
var(--x)当参数传给lighten()、saturate()这类函数，它不是颜色值，是字符串占位符 - Less函数无法穿透CSS变量层，就像不能对
calc(100% - 20px)做floor()一样，生命周期错位 - 如果你真需要基于主题色生成衍生色，必须在Less里用原始变量（
@primary-color）计算，再导出为对应CSS变量
正确做法：用Less变量计算，再桥接到CSS变量
核心思路是“分两层”：Less负责编译期颜色运算，CSS变量负责运行时桥接。比如要生成--primary-light，不能靠JS动态算，得在Less里写死逻辑：
@primary-color: #007bff;
@primary-light: lighten(@primary-color, 15%);
@primary-dark: darken(@primary-color, 10%);
<p>.export-variables() {
--primary-color: @primary-color;
--primary-light: @primary-light;
--primary-dark: @primary-dark;
}
.export-variables();
</p>
- 所有衍生色必须用
@primary-color等Less变量参与计算，确保编译期可执行 -
.export-variables()必须被调用，否则--xxx不会输出到CSS中 - JS侧只负责修改
--primary-color，其余--primary-light等值不会自动更新——它们是静态快照，不是响应式派生
想实现真正的运行时衍生色？只能放弃Less函数
如果业务要求“用户换主题色后，所有明暗变体自动重算”，Less做不到。此时必须切换技术栈：
- 改用CSS原生
color-mix()（Chrome 111+支持）：color-mix(in srgb, var(--primary-color) 85%, white 15%) - 或用
hsl()手动拆解：color: hsl(calc(var(--primary-hue, 205) * 1), calc(var(--primary-sat, 100%) * 1), calc(var(--primary-light, 50%) + 15%))，但需提前把HSL三值拆成独立CSS变量 - JS接管全部计算：监听
--primary-color变化，用getComputedStyle()读取RGB，再用chroma.js或手写算法生成新值，最后setProperty()写回其他变量
容易忽略的坑：回退值和单位陷阱
就算你把--primary-light导出了，使用时漏掉回退值或单位，照样失效：
- 用
background-color: var(--primary-light);→ 失效，没回退值，变量未定义时变成inherit - 应写成
background-color: var(--primary-light, #3b9eff); - 若用在
calc()里，比如width: calc(100% - var(--gap));→ 失效，--gap必须带单位（--gap: 8px），否则calc()语法错误 - 检查开发者工具「Computed」面板，确认
--primary-light是否出现在:root上，且值是有效颜色（非undefined或空字符串）
真正难的不是写对那一行var()，而是接受Less和CSS变量根本不在一个时间维度上——一个编译完就死了，一个活到页面卸载。想让它们协作，就得亲手搭桥，还不能指望桥自己长腿跑起来。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
