less根本没有作用域，@primary-color: red;是全局覆盖变量表中该键的值，后续所有未锁定引用均获新值；@import为线性拼接，顺序错误致undefined；泛义变量名须加前缀隔离；!default仅首次声明有效。
Less 根本没有作用域，所谓“作用域后变量失效”是误解——你写的 @primary-color: red; 不是定义局部变量，而是直接修改全局变量表里那个键的值；后续所有未被锁定的引用都会拿到新值，不是“失效”，是“被覆盖”。
嵌套里写 @var: value; 会全局覆盖，不是创建局部变量
Less 编译器不维护作用域栈，它只有一张扁平、可变、线性处理的变量表。你在 .btn { @primary-color: #dc3545; } 里重声明，@primary-color 就立刻变成 #dc3545，影响整个文件后续所有引用，包括 .link { color: @primary-color; }。
- 浏览器 DevTools 看不到哪一层嵌套改了变量，只能全局搜索
@primary-color定位 - 已编译生成的 CSS 不会回溯重算：按钮样式若在重定义前就编译完了，改了也无效
- 验证是否真被覆盖：在嵌套块末尾加
.debug { color: @primary-color; }，看输出是否符合预期
@import 顺序错位导致变量“看似定义却报 undefined”
@import 是纯文本拼接，不是模块加载。变量必须在使用前出现，顺序错了就直接报 NameError: variable @primary-color is undefined 或静默透出原始占位符（比如最终 CSS 里还留着 color: @primary-color;）。
- 错误写法：
.btn { color: @primary-color; } @import "variables.less";→ 引用时变量还没出现 - 正确做法：统一入口（如
main.less）最顶部写@import "variables.less";，再引入组件文件 - Webpack/Vite 中，
less-loader或additionalData若路径用别名（如@/styles/vars.less），会被 Less 引擎忽略——必须用path.resolve()转成绝对路径
泛义变量名 + 多文件共用 = 静默覆盖，不是冲突
多个文件（button.less、modal.less）都定义 @primary-color，最终生效的是最后一个 @import 进来的值。这不是 bug，是 Less 的设计行为。
- 安全做法是强制加前缀：
@btn-primary-bg、@modal-header-padding，杜绝@primary-color这类泛义名 -
@import (reference)不防变量污染，它只是不输出 CSS，变量和 mixin 仍注入全局作用域 -
!default只对首次声明有效，后面重复写@spacing: 8px !default;全部被忽略，无警告
真正容易被忽略的是：你写的每一行 @var: value; 都在实时改写一个共享变量表，而不是推入/弹出作用域。调试时不该盯着嵌套结构看，而要盯编译输出、@import 实际展开位置，以及变量在变量表中最后一次被赋值的地方。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
