less变量无lazy loading，仅编译期全文件扫描替换；css变量为运行时从自身或祖先查找，声明顺序直接影响生效。二者机制不同，混用必致错乱，需严格划清边界。
Less 没有 Lazy Loading 特性，所谓“变量提升”只是编译期全文件扫描，和 CSS 变量的运行时解析机制完全不兼容——混用时顺序错乱是必然结果。
Less 变量根本不是 lazy evaluation
很多人误以为 Less 的变量能写在后面、被前面引用，就是“延迟加载”，其实这只是编译器先扫完整个文件、收集所有 @xxx: 定义，再批量做文本替换。它不执行、不求值、不创建作用域，只是字符串匹配替换。一旦跨文件，这个“扫描”就失效了：如果 button.less 在 variables.less 之前被 @import，那么 button.less 里所有 @primary-color 引用都会报 variable @primary-color is undefined。
CSS 变量（--x）必须按渲染流顺序声明
CSS 变量是运行时从元素自身或祖先向上查找的，var(--color) 查不到就返回 unset，不会回退到其他作用域或等待后续声明。你写：
.btn { color: var(--primary); }
:root { --primary: #007bff; }
只要 :root 声明在 .btn 之后，.btn 就拿不到值——这和 Less 编译阶段的“全文件扫描”毫无关系，也不存在“提升”一说。
常见错误场景包括：
- 把
:root { --color: red; }放在组件样式文件末尾，但该文件被提前@import，导致使用点早于声明点 - 在 Vue 单文件组件的
<style lang="less"></style>里定义--color，却在另一个组件里用var(--color)，此时根本没有继承链 - 用
@import (reference)引入含:root声明的文件，结果 CSS 规则被抑制，变量也没注入到文档树
Less 和 CSS 变量混用时最容易踩的坑
二者机制完全不同，强行混合只会放大混乱：
-
@primary: #007bff;和--primary: #007bff;看似等价，但前者编译后消失，后者必须存活在最终 CSS 中且位置正确 -
var(--x, fallback)的fallback是查不到时的兜底值，不是“未定义时默认值”，和 Less 的@x: red !default;语义无关 - 嵌套中重定义
@padding会覆盖外层，影响后续所有引用；而重定义--padding只影响后代元素，&块内改不会波及同级其他块 - Webpack 的
less-loader或 Vite 的 Less 插件，对@import顺序零干预——你写的顺序就是最终顺序，没有自动拓扑排序
真正要解决顺序问题，得回到源头：Less 变量只管编译期文本替换，CSS 变量只管运行时继承链。别指望一个机制能“优化”另一个；需要运行时响应，就用 --x 并确保声明在使用点之前；需要编译期复用，就用 @x 并严格控制 @import 顺序。两者共存可以，但边界必须划清。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
