必须将全局变量统一收口至单个variables.less文件，因less无模块作用域，所有@import变量扁平合并、后定义静默覆盖前定义；变量名须带业务前缀，禁用裸名，!default是跨项目安全覆盖的必要机制。
全局变量必须收口到单个 variables.less 文件里
Less 没有模块作用域，所有 @import 进来的变量都会扁平合并进同一个作用域，后定义者静默覆盖前一个——你搜出十几处 @primary-color，根本不知道哪行生效。浏览器开发者工具只显示编译后的值，不显示来源。
实操建议：
- 整个项目只允许一个
variables.less，放在src/assets/styles/variables.less这类明确路径下 - 所有其他文件（包括组件
.less、mixin 文件）只能@import (reference)它，禁止重新声明同名变量 - 变量名必须带业务或组件前缀：
@btn-primary-bg可以，@primary-color不行 - 用
lessc --lint扫描重复定义（需 Less 4.0+），它会报出哪些文件重复声明了同一变量
!default 是跨项目复用的唯一安全机制
如果你在封装 UI 组件库供多个项目使用，!default 不是“可选”，而是防止隐式覆盖的守门员。没它，下游项目改个变量就可能让按钮变蓝、表单边框消失。
实操建议：
- 公共库中写：
@btn-height: 36px !default;—— 这只是占位，不锁定值 - 各项目自己的入口
overrides.less中写：@btn-height: 40px;（不加!default），这行才会真正生效 - Webpack/Vite 构建时，确保
overrides.less在variables.less之后被@import，顺序错则!default失效 - 禁用嵌套引用：
@btn-color: @blue;这种写法一旦@blue未定义，Less 不报错，只输出非法 CSScolor: @blue;，整条规则被浏览器丢弃
别把变量塞进命名空间块里
有人把 @primary-color 写在 .ui-kit { ... } 里面，以为能“隔离作用域”。这是无效的——Less 变量无作用域，嵌套不改变可见性，反而让团队成员误以为“这个变量只在 ui-kit 里有效”，造成认知偏差。
实操建议：
- 变量定义永远在顶层，和命名空间样式分离
- 命名空间块内只做“使用”：
.ui-kit { .button { background: @btn-primary-bg; } } - 所有 mixin、函数、颜色计算都基于已收口的变量，而不是在组件文件里临时定义
- Vue CLI 用户用
style-resources-loader自动注入variables.less，但注意：它只是省略@import，不解决变量覆盖问题
真正麻烦的是动态挂载内容没加顶层类名
变量定义再规范，如果 toast、modal、埋点弹窗这些 JS 动态插入的 DOM 没手动加上 class="ui-kit"，那所有基于命名空间的样式都匹配不到——不是 Less 写错了，是 HTML 没配合。
最容易被忽略的一点：第三方 SDK 注入的浮层（比如客服小窗、A/B 测试弹层）默认挂到 document.body，它们完全游离在你的命名空间之外，且你无法控制其 class 名。这时候变量再统一，也防不住这类冲突。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
