less变量无作用域隔离，仅按@import顺序线性覆盖；必须单点定义、强制前缀、禁用裸名，并用参数化mixin替代全局重定义。
别让 @primary-color 这类变量进你的全局作用域——它不是配置项，是编译期覆盖开关，一定义就生效，且无法局部遮蔽。
为什么重定义变量会静默改掉整个页面样式
Less 变量没有作用域，只有声明顺序。你在 buttons.less 里写 @primary-color: #e74c3c;，后续所有文件（包括 header.less、form.less）里用到的 @primary-color 都会变成红色，不管它在哪个嵌套块里声明。
- 嵌套块内声明
@x: 12px和顶层声明效果完全一样，&只影响选择器，对变量无任何隔离作用 -
.namespace { @color: red; }这种写法毫无意义——命名空间只包裹选择器，不封装变量 - 错误示例：
.btn { @primary-color: blue; color: @primary-color; }→ 不是局部生效，而是全局覆盖
真正有效的变量隔离方式
靠前缀 + 单点定义 + 参数化复用，而不是靠嵌套或 @import (reference) 假装有作用域。
- 所有变量必须带模块/语义前缀：
@btn-primary-bg、@card-header-padding、@input-border-radius，禁用@color、@size这类裸名 - 基础设计 Token（如品牌色、字号步长）统一收口到
src/styles/variables.less，且该文件只含纯声明：@brand-blue: #007bff;，结尾必须带分号 - 组件文件禁止重定义泛义变量，想定制按钮颜色？用
.btn-style(@bg: @brand-blue)这类参数化 mixin，调用时显式传值 -
@import (reference)对变量无效——它仍会把变量注入当前作用域，只适合引入不含变量的mixins.less
@import 顺序错位导致变量未定义的典型场景
Less 编译就是线性拼接，变量必须在使用前出现，顺序错了就报 Variable is undefined，不是作用域问题，是文本顺序问题。
- 错误顺序：
@import "components/button.less"; @import "styles/variables.less";→button.less里引用的@btn-height还没定义 - 正确做法：所有
variables.less、mixins.less必须放在入口index.less最顶部 - Webpack 下 less-loader 若并行处理多个入口，可能导致
variables.less被重复加载、变量被多次覆盖，需检查less-loader的paths配置是否唯一 -
@import (once)只防同一文件重复引入，不解决跨文件顺序问题
最易被忽略的一点：浏览器开发者工具看不到变量来源，lessc --verbose 也不报覆盖警告——你永远不知道是哪个文件悄悄改了 @primary-color，只能靠命名前缀和单点定义硬约束。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
