Less变量在编译期替换，无JS式提升；需严格分号结尾，否则后续变量失效；作用域按就近向上查找，禁止顶层重复定义；私有变量加下划线前缀；关键变量须手动导出为CSS自定义属性。
Less 变量不是“提升”到运行时，而是编译期一次性替换——它没有 JavaScript 那种 hoisting 行为，所谓“变量提升”是误解。真正起作用的是作用域查找规则和引入顺序，用错就导致 @undefined-variable 或静默失效。
变量声明必须带分号，漏掉就中断后续所有变量
Less 解析器对分号敏感，但错误不报错，只跳过该行及之后的变量声明。
-
@primary-color: #007bff;✅ 正确（结尾有分号） -
@spacing-md: 16px❌ 错误（缺分号），会导致@font-size-base等后续变量全部不可用 - 常见现象：改了
@text-emphasis却没生效，实际是它前面某个变量漏了分号，整个_variables.less后半截都没加载
变量作用域按“就近向上”查找，不是全局覆盖
Less 没有“重定义”概念，只有作用域内查找。在嵌套块或 mixin 中重新声明同名变量，只影响当前作用域及子级，不会污染外层。
-
.btn { @primary-color: #ff6b6b; color: @primary-color; }→ 编译后仅该按钮变色，不影响.header中的@primary-color - 但若在顶层（
main.less最外层）重复写@primary-color: ...，会覆盖前面的值，且无法回退 - 安全做法：所有基础变量集中放在
_variables.less，禁止在组件文件里裸声明同名变量
模块私有变量要用下划线前缀，避免跨模块误引用
变量名不加约束，很容易在 forms.less 里直接读 buttons.less 的 @btn-padding-x，造成隐式耦合。
立即学习“前端免费学习笔记（深入）”；
- 正确方式：
@_btn-padding-x: 12px;（以下划线开头），并在文档中约定“带@_的变量不得被其他模块 import 引用” - 调用方应使用统一语义变量，如
@input-padding-x，由_variables.less统一定义并保持对齐 - 错误示例：
@import "buttons"; .form-item { padding: @btn-padding-x; }→ 一旦按钮模块重构，表单样式立刻崩
变量必须同步导出为 CSS 自定义属性，才能被 JS 读取
Less 变量只存在于编译阶段，JS 拿不到。要让 JS 动态控制主题，得手动把关键变量映射成 :root 下的 --primary-color。
- 在
_variables.less末尾加：:root { --primary-color: @primary-color; --spacing-md: @spacing-md; } - JS 中用
getComputedStyle(document.documentElement).getPropertyValue('--primary-color')读取 - 注意：Less 不会自动帮你做这步，漏掉就等于主题切换功能断链
最易被忽略的一点：变量值里含函数（如 darken(@primary-color, 10%)）时，该变量不能被直接输出为 CSS 自定义属性——CSS 不认识 Less 函数。必须先计算好结果再赋值，否则浏览器收到的是无效值。
