Less中--color-primary需用~"@{primary-color}"声明，无法直接解析；降级须双声明且var()在后，禁用var(--c, @v)混写。
Less里直接写--color-primary会被编译成无效CSS变量
Less默认把--开头的标识符当普通属性名处理，不会透传给CSS运行时。比如写color: var(--color-primary);，Less能认出来这是合法CSS函数，但--color-primary本身不会被解析或替换——它只是字符串的一部分。问题在于：你没法在Less中用@primary-color去动态生成--color-primary变量，也不能在var()里做计算。
用~""拼接字符串实现CSS变量声明
Less的~""语法可绕过转义，让内容原样输出。这是目前最可靠的方式声明自定义属性：
html {
--color-primary: ~"@{primary-color}";
--spacing-md: ~"@{space-md}";
}
注意点：
-
@{primary-color}必须是已定义的Less变量（如@primary-color: #007bff;），不能是嵌套引用或函数调用 - 如果值含单位（如
@space-md: 16px;），~"@{space-md}"会原样输出16px，浏览器能识别 - 不要加引号包裹整个
~""内容，否则CSS变量值会带多余引号
降级方案必须用color: @primary-color + color: var(--color-primary)双声明
CSS自定义属性的降级靠层叠：前一条被忽略时，后一条生效。Less里不能用@support做条件编译，所以只能手动写两行：
.btn {
color: @primary-color; // 旧浏览器fallback
color: var(--color-primary); // 现代浏览器优先
}
关键细节：
- 顺序不能反——CSS按从上到下覆盖，
var()必须在后面 - 不能用
!default或if()模拟降级，Less不支持运行时检测 - 如果
@primary-color是计算值（如lighten(@base, 10%)），确保它在var()声明前已求值，否则降级色会不准
避免在var()里混用Less变量和CSS变量
常见错误是试图这样写：color: var(--color-primary, @primary-color);。这看似合理，但@primary-color在CSS运行时根本不存在，浏览器只看到字面量@primary-color，最终降级失败。
正确做法只有两种：
- 纯CSS变量降级：用
var(--color-primary, #007bff)，硬编码fallback值 - Less变量降级：用上面说的双声明法，由Less生成确定值
混合写法没有实际意义——你既得不到Less的编译能力，也得不到CSS变量的动态性。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
