Less无真正作用域，变量是编译期线性覆盖的全局值；嵌套中改@padding会全局生效，因变量查找只认定义顺序而非嵌套层级；!default仅作首次赋值守门员，不提供隔离；局部性须靠.mixin()参数封装或@import(reference)实现。
Less 没有真正的作用域机制，所谓“作用域影响”其实是编译期线性扫描 + 赋值覆盖 + @import 顺序共同导致的结果。你写的嵌套结构、& 符号、甚至 !default 都不创造新作用域，只是在单文件内按出现顺序改写变量值。
为什么嵌套块里改@padding会导致外部也变
Less 变量查找只认定义位置，不认嵌套层级。它不是词法作用域，而是“谁写在后面谁生效”的线性覆盖。
-
.card { @padding: 16px; &__header { padding: @padding; } &__body { @padding: 24px; padding: @padding; } }编译后，&__header实际用的是24px，因为第二个@padding声明覆盖了第一个 -
&只控制生成的选择器前缀（比如.card__header），和变量查找路径完全无关 - 你在
&__footer里再写一次@padding: 8px，前面所有引用都会变成8px，哪怕你本意只想调小页脚间距
!default 不是作用域开关，而是首次赋值守门员
!default 只在变量**尚未被赋过值**时起效，它不回滚、不隔离、不感知嵌套，也不受文件边界保护。
-
@primary-color: #007bff !default;写在base.less，项目里@primary-color: #28a745;才能覆盖——但前提是项目文件@import在base.less之后 - 两个文件都用了
!default，且先后@import，后者仍会覆盖前者（前者已被视为“已赋值”） -
!default写在.mixin()里面无效，它只对顶层@变量起作用 - 构建时本地正常、线上还原默认色？很可能是
less-loader并行处理多个入口，变量文件被拆进不同 chunk，彼此不可见
真正可控的局部性只来自.mixin()和@import (reference)
想让样式配置不互相污染，必须放弃裸写 @variable，改用参数化封装或显式导入控制。
立即学习“前端免费学习笔记（深入）”；
- 用
.padding(@p: 16px) { padding: @p; }替代@padding: 16px;，调用时显式传参，避免隐式覆盖 - 需要多档配置？用
@config: (large: 14px, small: 12px);+map-get(@config, large) - 全局变量统一抽到
variables.less，用@import (reference)引入——它不输出 CSS，只提供变量和 mixin - Vue 单文件组件里
@import失效？因为 scoped style 是独立编译单元，得靠vite-plugin-style-import或手动注入
最常被忽略的一点：所有试图靠 &、嵌套块、!default 或文件物理位置来“模拟局部作用域”的做法，在多文件协作、组件复用、主题切换或构建分包时一定会出问题。变量是编译期静态值，@primary-color 决定的是构建那一刻的硬编码结果，运行时切换必须靠 CSS 自定义属性联动。
