less变量无作用域，嵌套重声明会全局覆盖而非局部遮蔽；解决需靠命名前缀、单点定义variables.less、参数化mixin及严格@import顺序。
Less 里没有真正的“作用域”，变量冲突不是作用域没设好，而是编译期线性覆盖 + 就近查找导致的静默替换。解决它不靠嵌套层级，而靠声明位置、命名隔离和导入顺序。
变量为什么在嵌套里改了却影响全局
嵌套块内重新声明 @primary-color 不会创建局部变量，它直接覆盖外层同名变量，后续所有引用（包括嵌套外、其他文件）都会拿到新值。比如：
.card {
@primary-color: #e74c3c;
.header { color: @primary-color; } // 红色
.footer { color: @primary-color; } // 也是红色，且之后所有 .btn { color: @primary-color; } 全变红
}
这不是作用域泄漏，是变量被重写后全局生效。Less 编译器根本不区分“块内变量”，只认“最后一次定义”。
- 嵌套中赋值
@x: 12px和顶层赋值效果完全一样 -
&只影响选择器生成，对变量无任何作用 - 想局部用不同值？必须用 mixin 参数传入，而不是重声明变量
如何让不同组件用同名变量却不打架
靠前缀硬隔离，不是靠文件或嵌套。Less 没有模块级变量空间，@import (reference) 也不能隔离变量——它只是不输出 CSS，变量照样注入全局作用域。
- 禁止裸名：
@color、@size必然撞车 - 强制模块前缀：
@btn-primary-bg、@modal-header-padding - 公共基础变量收口到单一
variables.less，且该文件禁止写任何样式或 mixin - 组件文件只
@import "variables.less"，绝不重定义@primary-color这类泛义名
如果真要复用逻辑，用参数化 mixin：.btn-style(@bg: @brand-blue)，调用时显式传参，变量值不依赖外部状态。
为什么 @import 顺序一错就报 Variable is undefined
Less 的 @import 是纯文本拼接，不是模块加载。变量必须在使用前定义，顺序错了就找不到——不是作用域问题，是编译顺序问题。
- 错误顺序：
@import "button.less"; @import "variables.less";→button.less里引用的@primary-color还没出现 - 正确顺序：所有
variables.less、mixins.less必须放在最顶部 - Webpack 中 less-loader 可能并行处理多个入口，导致
variables.less被多次引入、变量被反复覆盖，需检查构建配置 -
@import (once)只防同一文件重复引入，不解决顺序问题
调试时怎么快速定位哪个文件改了变量
浏览器开发者工具看不到变量来源，lessc --verbose 也不报覆盖警告。唯一可靠方式是静态扫描 + 构建时 lint。
- 用
lessc --lint（Less 4.0+）检查重复定义，它会提示 “Duplicate variable definition” - 全局搜索
@primary-color:（注意冒号），配合 IDE 的“引用跳转”看定义链 - 确保所有变量声明都带分号：
@spacing-xs: 4px;，漏掉分号会导致该行及之后所有变量声明被跳过，且无报错 - 禁用
javascriptEnabled，避免 JS 表达式意外污染变量空间
真正容易被忽略的是：变量冲突不会让你的样式“不生效”，而是“生效得不对”——它静默替换了你预期之外的值，等上线才发现按钮全变紫了，但查半天找不到谁动了 @primary-color。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
