Less中需用插值~'--color-primary'原样输出CSS变量，避免报错；var()内不可嵌套计算或颜色函数，fallback需手动写；CSS变量应在运行时由浏览器解析，Less仅负责静态逻辑。
Less里直接用--color-primary会报错，因为Less不解析CSS变量
Less编译时把--color-primary当普通字符串或未定义变量处理，不是传给浏览器的CSS自定义属性。你写color: --color-primary;，Less会尝试查找名为--color-primary的Less变量（显然不存在），报variable @--color-primary is undefined。
真正要的是“让Less原样输出--color-primary，不编译、不替换”。关键在绕过Less变量解析机制：
- 用引号包裹，如
color: '--color-primary';→ 输出color: '--color-primary';（带引号，非法） - 用插值
~'--color-primary'→ 输出color: --color-primary;（正确） - 函数调用形式
get(--color-primary)不行，Less没这函数
@custom-prop: ~'--theme-color';这种写法能复用但有陷阱
可以定义一个Less变量存CSS变量名，再用插值注入，看起来干净：
@theme-color: ~'--theme-color';
.button {
color: var(@theme-color);
}
但注意两点：
立即学习“前端免费学习笔记（深入）”；
- 必须用
~''，写成@theme-color: '--theme-color';会导致输出带引号，var('--theme-color')是无效语法 - 不能在
var()里嵌套计算，比如var(@theme-color + '-hover')不行——Less不支持字符串拼接后插值进var() - 如果想fallback，得手写：
color: var(@theme-color, #333);，Less不会帮你展开
和var()一起用时，Less无法做颜色运算
这是最容易掉坑的地方：你不能对CSS变量做lighten(@primary, 10%)，因为@primary如果是~'--primary'，它只是个字符串，不是颜色值。
常见误操作：
-
background: lighten(~'--bg', 10%);→ 编译失败，lighten()只接受颜色类型 - 想“提前算好”再赋给CSS变量？不行，CSS变量值在运行时才生效，Less编译时根本不知道
--bg是什么 - 正确思路是：用CSS原生
color-mix()或hsl()函数在浏览器端计算，或者用Less生成多套变量值（静态）
构建工具链里CSS变量和Less共存的真实约束
Less文件最终要转成CSS，而CSS变量依赖浏览器解析。这意味着：
- 所有
var(--x)必须出现在最终CSS里，不能被Less提前替换成具体值（除非你放弃CSS变量动态性） - PostCSS插件如
postcss-custom-properties会在Less之后运行，但它只处理var()，不处理Less变量，两者不冲突但也不互通 - 如果你用Webpack+Less+CSS Modules，注意
:export不能导出--xxx，它只认JS对象，需额外用:global或单独CSS文件暴露变量
最简稳态方案：Less负责结构和静态逻辑，CSS变量文件单独维护，用@import引入CSS（非Less）变量定义，或靠HTML <style>注入。别指望Less替你管运行时变量。
