less变量提升是编译期文本扫描行为，仅限单文件或正确@import顺序的扁平上下文，不解决作用域问题；css变量是运行时树状继承机制，必须在使用前声明且受层叠影响。
Less变量提升 ≠ CSS自定义属性提升
Less的“变量提升”是编译期文本扫描行为，而CSS变量（--color）是运行时作用域查找机制，两者根本不在同一层——混用时必然表现不一致。
你写@primary: #007bff;放在文件末尾，前面.btn { color: @primary; }能生效，是因为Less在编译前已扫完整个文件、收集所有@xxx定义，再批量替换；但:root { --primary: #007bff; }若写在.btn规则之后，.btn { color: var(--primary); }照样取不到值，因为CSS引擎按渲染流顺序解析，未声明的var()返回unset。
- Less变量只存在于编译阶段，输出后就消失，和最终CSS无关
- CSS变量必须在使用前被声明（至少在同级或祖先元素上），且受继承和层叠影响
-
var(--x, fallback)里的fallback不是“未定义时兜底”，而是“查不到时取默认”，和Less的!default语义完全不同
@import顺序错位会让Less变量“看似没提升”
Less单文件内确实支持后定义前使用，但跨文件就不行——@import不是异步加载，而是编译期文本拼接，顺序错了，变量就根本没被“扫到”。
比如你在index.less里先@import "button.less";再@import "variables.less";，那么button.less里所有@primary引用都会报错variable @primary is undefined，哪怕variables.less里明确定义了它。
- 变量提升仅限于当前编译上下文（即一个
@import树展开后的扁平文本） - 构建工具如Webpack的
less-loader不会重排@import顺序，它严格按源码书写顺序执行拼接 - Vue/React单文件组件中
<style lang="less"></style>是独立编译单元，不自动继承项目级variables.less
嵌套块里重定义@variable会覆盖全局，不是局部作用域
Less没有词法作用域，.card { @padding: 16px; &__body { @padding: 24px; } &__header { padding: @padding; } }中&__header最终用的是24px，不是16px——这不是“提升失效”，而是后声明直接覆盖前值。
这和CSS变量完全不同：.card { --padding: 16px; } .card__body { --padding: 24px; } .card__header { padding: var(--padding); }中.card__header取到的仍是16px，因为--padding未在自身或祖先上重新声明。
- Less变量是线性、扁平、全局覆盖模型；CSS变量是树状、继承、局部声明模型
- 想模拟CSS变量的局部性？必须用
.mixin(@p: 16px) { padding: @p; }显式传参，不能依赖嵌套 -
&只影响选择器生成，对变量查找路径毫无影响
变量插值@{name}必须在使用前定义
Less的延迟加载对普通变量有效，但对选择器插值无效：@name: header; .@{name} { }若@name定义在后面，编译会报错或生成空选择器.{} ，因为插值发生在编译中期，此时变量尚未被扫描到。
- 插值不是简单字符串替换，它参与选择器语法解析，要求变量值在该点已确定
-
url(@path)、calc(@val + 1px)同理：变量必须在调用点之前定义，否则可能触发Unrecognised input - 这种“部分不提升”现象最容易让人误判为“提升机制不稳定”，其实是设计使然
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
