less变量无法直接编译为css自定义属性，必须手动在:root中声明--color-primary: @color-primary，并在样式中使用var(--color-primary)引用，否则仅输出静态值。
Less 变量无法直接编译成 CSS 自定义属性
Less 本身是编译时预处理器，@color-primary 这类变量在输出 CSS 时已被替换为具体值（如 #007bff），不会保留为 --color-primary。想得到可运行时修改的 CSS 自定义属性，必须手动映射或借助插件/构建步骤干预编译流程。
手动声明：最可控但需双写维护
适用于变量少、需要精确控制作用域和 fallback 的场景。核心是「用 Less 变量初始化 CSS 自定义属性」，而非转换。
常见错误现象：@color-primary: #007bff; 后直接写 color: @color-primary; —— 这只会输出静态值，不生成 --color-primary。
正确做法：
- 在根选择器（如
:root）中显式声明自定义属性，并用 Less 变量赋值：:root { --color-primary: @color-primary; --spacing-md: @spacing-md; } - 后续样式中改用
var(--color-primary)，而非直接引用@color-primary - 若需兼容旧浏览器，可加 fallback：
color: @color-primary; color: var(--color-primary);
用 postcss-custom-properties 插件自动注入
适合已有大量 Less 变量、不想逐个重写声明的项目，但依赖构建链路支持 PostCSS。
使用前提：Less 编译后还需走 PostCSS 流程（如通过 postcss-less 或 Webpack 的 postcss-loader）。
关键点：
- 插件本身不读取 Less 源码，只处理已编译出的 CSS 中的
var()和:root { --x: ... }声明 - 要让它“感知” Less 变量，得先用 Less 输出含自定义属性的 CSS（比如上面的手动方式），再由插件做降级或值内联
- 真正实现“Less 变量 → CSS 自定义属性”的自动化，需额外工具如
less-plugin-custom-properties（社区维护较弱，需验证兼容性）
变量命名与作用域容易被忽略的细节
Less 变量名和 CSS 自定义属性名是两套体系，不能靠命名约定自动对齐（比如 @bg-color 不会变成 --bg-color）。
性能影响：CSS 自定义属性是运行时计算的，大量嵌套 var(--a, var(--b, ...)) 可能轻微拖慢渲染；而 Less 变量是编译期替换，零运行时开销。
容易踩的坑：
- 在
@media或.theme-dark里覆盖:root变量时，忘记用!important或更高优先级选择器 —— CSS 自定义属性遵循层叠规则，不是 Less 的作用域嵌套 - Less 变量支持函数（如
lighten(@color, 10%)），但直接塞进--color: lighten(@color, 10%)会报错 —— 必须先计算好值，再赋给自定义属性 - 导出变量给 JS 用时，别只读
:root，要考虑 Shadow DOM 或 scoped 样式下getComputedStyle的目标元素是否匹配
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
