less变量提升是编译期文本扫描行为，仅限单文件或正确@import顺序的扁平上下文，不解决作用域问题；css变量是运行时树状继承机制，必须在使用前声明且受层叠影响。
Less变量提升和CSS变量根本不是一回事——一个是编译期文本扫描，一个是运行时树状查找，强行类比只会踩坑。
Less变量提升只发生在单文件内，且不解决作用域问题
你写@color: red;放在文件末尾，前面的.btn { color: @color; }能生效，是因为Less在编译前就扫完整个文件、收集所有@xxx定义，再统一替换。但这仅限于当前文件或正确@import顺序拼接后的扁平文本上下文。
- 跨文件时，
@import顺序错位（比如先@import "button.less"再@import "variables.less"），button.less里所有@color都会报variable @color is undefined - 嵌套块里重定义
@padding，不是“局部覆盖”，而是直接覆盖全局值：.card { @padding: 16px; &__body { @padding: 24px; } &__header { padding: @padding; } }中&__header最终用的是24px -
!default不是作用域开关，只在变量“尚未被赋过值”时生效；两个文件都用了!default，后@import的仍会覆盖前者的值
CSS变量必须在使用前声明，且受继承与层叠影响
:root { --color: red; }写在.btn规则之后，.btn { color: var(--color); }照样取不到值——CSS引擎按渲染流顺序解析，未声明的var()返回unset，不是报错，也不回溯查找。
-
var(--x, fallback)里的fallback是“查不到时取默认”，不是“未定义时兜底”，和!default语义完全不同 -
.card { --padding: 16px; } .card__body { --padding: 24px; } .card__header { padding: var(--padding); }中.card__header取到的仍是16px，因为--padding没在自身或祖先上重新声明 - Vue/React单文件组件中的
<style lang="less"></style>是独立编译单元，不会自动继承项目级variables.less，也不能直接读取:root里的--color
Less里直接写var(--x)会出错，必须转义
Less解析器看到--x会尝试匹配变量语法，但--不是合法Less变量前缀，结果要么报ParseError，要么静默输出空值var()，甚至错误替换成var(#007bff)（如果你定义了@x: #007bff）。
- 正确写法是
~"var(--x)"，让Less跳过解析、原样输出 -
~"var(--@{theme}-primary)"这种动态拼接，必须先拼字符串再整体转义；~"var(--@{x})"写法无效，因为~""内部不支持插值 - 用
.use-var(@name, @fallback)mixin统一管理比散落各处的~"var(--x)"更可靠：改主题色名只需动一处，fallback也强制存在
最容易被忽略的是：Less编译不检查~"var(--x)"里--x是否真在CSS中定义过，这个错误要等运行时才能发现——浏览器静默忽略，调试工具才抓得到。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
