less变量无作用域，嵌套中重声明会全局覆盖而非局部生效；@import为线性拼接，顺序错误致undefined或静默覆盖；泛义变量名必然冲突，须加前缀隔离；!default仅对首次声明有效，非后备机制。
Less变量根本没有作用域，所谓“作用域内”是错觉
Less里不存在块级作用域或嵌套作用域。写 .btn { @primary-color: red; color: @primary-color; } 不会创建局部变量，而是直接覆盖当前编译上下文中的 @primary-color 值。后续所有未被锁定的引用（比如文件末尾的 .link { color: @primary-color; }）都会拿到 red —— 这不是 bug，是 Less 编译器线性处理变量表的设计逻辑。
浏览器 DevTools 完全看不到哪一层嵌套改了变量，只能靠全局搜索 @primary-color 定位；已生成的 CSS 也不会回溯重算：如果按钮样式在重定义前就被编译，改了也无效。
@import 顺序错位导致变量未定义或静默覆盖
@import 是纯文本拼接，不是模块加载。变量必须在使用前定义，顺序错了就报 Variable is undefined 或静默覆盖。
- 错误顺序：
@import "button.less"; @import "variables.less";→button.less里引用的@primary-color还没出现 -
@import (once)只防同一文件重复引入，不解决顺序问题 - Webpack 中
less-loader可能并行处理多个入口，variables.less被多次引入，变量反复覆盖
命名没隔离，多个文件共用泛义变量名
多个组件文件（如 button.less、modal.less）各自定义 @primary-color，最终生效的是最后一个 @import 进来的值——这不是冲突，是设计行为。
安全做法是强制加前缀：
- ❌
@primary-color - ✅
@btn-primary-bg、@modal-header-padding - 别把通用变量塞进
@import (reference)文件里，它仍会注入全局变量空间
!default 不是后备值，只对首次声明生效
@primary-color: #007bff; 写在前面，后面再写 @primary-color: #333 !default;，!default 完全不生效——它只在变量**尚未被声明过**时起作用。
典型翻车：
-
@spacing: 8px !default;和@spacing: @spacing * 2;放一起 → 报Recursive variable definition - 多个
!default对同一变量重复声明，只有第一个有效，后面全忽略（无警告） - 来自
@import的变量，导入顺序决定谁能赢：后导入的!default无法覆盖先导入的普通声明
真正容易被忽略的是：你写的每一条 @var: value; 都在修改一个扁平、可变、线性的变量表，而不是推入/弹出作用域栈。调试时别盯着嵌套结构看，要盯编译输出和 @import 的实际展开位置。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
