less变量仅在编译时按顺序展开，无运行时作用域；!default仅在变量未定义时生效，覆盖取决于定义位置而非是否使用!default，所有@import共享全局变量作用域。
Less变量没有运行时作用域，只有编译时顺序依赖
Less变量不是JavaScript里的let或const，它不支持“重新声明”或“条件赋值”，整个文件编译时会按顺序做一次变量展开。所谓“按需加载”本质是控制@import顺序和变量定义时机；所谓“覆盖”，其实是后定义的同名变量把前面的值冲掉——这和!default是否出现无关，只和位置有关。
真正起作用的是：谁先被解析、谁后被解析。如果你把基础变量文件放在最后@import，那它永远覆盖不了前面已用的值，因为那些地方早已替换成旧值了。
- 变量一旦在表达式中被引用（比如
color: @primary-color;），编译器就在那一刻锁定它的当前值 -
!default只在变量**尚未被定义过**时生效；如果之前已有@primary-color: #007bff;，后面写@primary-color: #dc3545 !default;完全无效 - 多个
@import之间没有隔离作用域，所有变量全局可见、后写覆盖前写
用!default模拟默认值必须前置定义且不重复赋值
想让某个变量有“可配置默认值”，必须确保它第一次出现就是带!default的定义，并且之后不再无条件重定义。典型错误是：在主题文件里先@import 'vars.less';，再写@primary-color: #ff6b6b;——这样vars.less里的@primary-color: #007bff !default;其实根本没机会触发。
正确做法是把含!default的变量集中放在最顶层的入口文件（如index.less）开头，然后才@import其他模块：
@primary-color: #007bff !default; @font-size-base: 14px !default; @border-radius: 4px !default; @import 'components/button.less'; @import 'components/input.less'; @import 'themes/dark.less'; // 这里可以安全覆盖上面的变量
- 所有
!default定义必须出现在任何可能引用它们的@import之前 - 覆盖动作应发生在
@import链靠后的位置（如themes/dark.less），且使用无!default的直接赋值 - 避免在同一个文件里既写
@var: ... !default;又写@var: ...;，后者会直接覆盖前者
按需加载的关键在于分离“定义”与“使用”
Less本身不支持动态导入或条件编译，但你可以通过组织文件结构实现逻辑上的“按需”：把变量定义抽离成独立文件（如vars-default.less、vars-theme-a.less），再由构建脚本或不同入口文件决定导入哪个。
例如，你有两个主题入口：
// theme-a.less @import 'vars-default.less'; @import 'vars-theme-a.less'; // 覆盖部分变量 @import 'main.less'; // theme-b.less @import 'vars-default.less'; @import 'vars-theme-b.less'; // 覆盖另一些变量 @import 'main.less';
-
main.less只负责样式逻辑，不定义变量，只消费@primary-color等 - 每个主题入口文件控制自己所需的变量集，互不影响
- Webpack或Gulp中可通过
less-loader的paths或modifyVars进一步注入变量，但那是运行时层，和!default机制正交
容易忽略的坑：嵌套作用域与@import嵌套中的变量泄漏
Less的@import不是沙箱，即使你在.button.less里@import 'mixins.less'，里面定义的变量也会泄露到全局。这意味着：如果mixins.less里写了@transition-time: 0.2s !default;，而你在main.less顶部也写了同名变量，结果取决于谁先被解析——但你很难直观判断嵌套@import的展开顺序。
- 永远不要在会被多次
@import的文件（如工具类、mixin集合）里定义常规变量，只放!default变量或.class-name() { ... }这类封闭结构 - 对关键变量做命名空间前缀，比如
@btn-primary-bg比@bg更可控 - 用
lessc --lint或VS Code插件检查重复定义警告，但Less本身不报错，只能靠人工梳理
真正难的不是语法，而是维护几十个@import层级后，谁在什么时候定义/覆盖了哪个变量——这时候!default只是起点，不是银弹。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
