应统一在 variables.less 中定义变量并确保每个 .less 文件顶部显式导入；重复声明会导致维护困难和样式不一致，变量作用域为文件顶层且不自动继承，同名变量后导入者覆盖先导入者，命名需语义化、单位统一、避免插值与 mixin 调用。
直接用 @import 引入一个集中定义变量的文件，就能让所有 Less 文件共享同一套变量源 —— 但必须注意导入顺序、作用域穿透和命名冲突这三点。
为什么不能在每个 .less 文件里重复声明 @primary-color？
重复声明不仅增加维护成本，还会导致样式不一致：某处改了 @primary-color: #1890ff，另一处还留着 @primary-color: #40a9ff，审查元素时根本看不出哪份生效。更麻烦的是，Less 的变量作用域是“就近 + 块级”，@import 进来的变量默认只在当前文件顶层作用域有效，嵌套规则里不会自动继承。
- 变量不会跨文件自动提升为“全局”——哪怕你
@import了，它也只是当前文件的顶层变量 - 如果在
.btn { @{color}: red; }这类选择器变量中引用未声明的@color，编译会直接报错：NameError: variable @color is undefined - 多个
@import同名变量时，后导入的会覆盖先导入的（按文件被解析的顺序），不是按字母或路径排序
variables.less 文件该写什么、怎么写？
它应该只做一件事：声明变量，不写任何样式规则、不调用 mixin、不嵌套、不运算（除非是基础计算，比如 @spacing-xs: 4px;）。所有值都应有语义，避免裸数字或裸颜色。
- 用
@开头，结尾必须带分号：@color-brand-primary: #1890ff;，漏掉分号会导致后续变量全部失效 - 颜色推荐分层命名：
@color-text-primary、@color-border-divider、@color-bg-container - 尺寸统一单位，优先用
px或rem，避免混用；如需响应式基础值，可加注释说明用途：@font-size-base: 14px; // 用于 body 和大多数文本 - 不要在 variables.less 里写
@{...}插值或.mixin()调用——它不是执行上下文，只是数据源
如何确保所有 .less 文件都能“看到”这些变量？
关键不是“引入一次”，而是“在每个需要变量的文件最顶部 import”，且必须放在所有其他语句之前（包括注释除外）。
- 错误写法：
.header { color: @color-brand-primary; } @import "variables.less";—— 变量在使用之后才导入，编译失败 - 正确写法：
@import "variables.less"; .header { color: @color-brand-primary; } - 如果项目分模块（如
components/、layout/），每个模块的入口index.less都要显式@import "../variables.less"，不能依赖父级导入“透传” - VS Code 的 Easy LESS 插件不会自动帮你补全跨文件变量，所以必须手动 import，否则编辑器提示和编译都会出问题
遇到变量被意外覆盖或不起作用怎么办？
最常见原因是作用域遮蔽或导入路径错误，而不是语法问题。
- 检查是否在局部作用域重新声明了同名变量，例如：
.card { @color-brand-primary: #f00; color: @color-brand-primary; }—— 这只会覆盖当前块内，不影响外部，但容易误判 - 确认
@import路径正确：用相对路径，且注意大小写（Linux/macOS 区分大小写，@import "Variables.less"和variables.less是两个文件） - 运行
lessc --verbose main.less查看实际解析顺序和警告，有时会提示variable was redefined - 避免在
variables.less中用@import嵌套导入其他变量文件——它应是原子单元，否则调试链路变长
真正难的不是写 @import，而是在团队协作中坚持“变量只在 variables.less 定义、只通过相对路径导入、不许在业务文件里临时声明同名变量”这三条铁律。一旦松动，三个月后你就得 grep 全项目找哪个 @primary-color 被悄悄改成了 #ff6b6b。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
