less变量无真正局部作用域，仅按赋值顺序覆盖；嵌套中修改变量会影响外部，因变量查找遵循就近原则且不创建新作用域；!default仅在变量未赋值时生效，不提供作用域隔离；真正局部性需依赖.mixin()和@import(reference)实现。
Less 里没有真正意义上的“局部作用域变量”，所谓局部覆盖只是变量赋值顺序导致的覆盖效果，不是词法隔离。想靠嵌套块或 & 创建独立变量空间，一定会在多文件协作或组件复用时出问题。
嵌套中改 @padding 为什么会影响外部？
Less 变量查找遵循“就近原则”：先找当前块内定义，再向上逐层回溯到文件顶层。但关键在于——它不创建新作用域，只做线性重写。
-
@padding: 16px;在.card块内声明，后续同名声明会直接覆盖它 -
&__body { @padding: 24px; }不是“子作用域变量”，而是同一文件中更靠后的赋值 -
&__header编译时拿到的是最后一次赋值的@padding（即 24px），不是最初声明的 16px -
&只影响生成的选择器结构，和变量查找路径完全无关
!default 不是作用域开关，而是首次赋值守门员
!default 只在变量**尚未被赋过值**时生效，它不提供回滚、不支持条件覆盖、也不受嵌套层级保护。
-
@primary-color: #007bff !default;写在基础库，项目里再写@primary-color: #28a745;才有效——但前提是项目文件@import在基础库之后 - 两个文件都用了
!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 是独立编译单元，得靠style-resources-loader或 Vite 的vite-plugin-style-import注入
最常被忽略的一点：Less 的 @ 变量是编译期静态值，无法运行时切换。主题切换必须靠 CSS 自定义属性联动，@primary-color 只能决定构建那一刻的硬编码结果。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
