Less变量污染源于@import默认展开式合并，应使用@import (reference)隔离作用域；Mixin需带参约束接口，避免无参纯声明块；@import须集中于入口或严格分层；CSS膨胀主因是嵌套过深与重复媒体查询，须用.mixin统一收口。
Less变量和作用域怎么避免全局污染
Less里@color-primary这种变量看似简单，但一不留神就变成“所有文件都能改、谁改了谁负责”的状态。根本问题不在语法，而在没划清作用域边界。
- 变量定义只在当前文件或
@import链内生效，但@import默认是“展开式”合并，相当于把所有内容拼进一个大文件里，@color-primary一旦在多个地方重复定义，后导入的会覆盖前面的 - 推荐做法：把基础变量（颜色、间距、断点）全收进
variables.less，用@import (reference)引入——它不输出CSS，只提供引用上下文，真正用到的地方再@import (less)或直接.mixin调用 - 别在组件less里直接写
@color-bg: #f8f9fa，改成@color-bg: @color-surface-light，让语义穿透到底层变量体系
如何用.mixin替代重复的CSS声明块
写.btn { border-radius: 4px; padding: 8px 16px; }三次？不是懒，是埋雷。Mixin不是语法糖，是约束接口。
- 带参数的Mixin（如
.border-radius(@r: 4px)）必须显式传参，不能依赖外部变量，否则重构时根本不知道它暗中用了哪个@r - 避免无参数、纯声明块的Mixin（如
.reset-list { list-style: none; margin: 0; padding: 0; }），这种不如直接写class——它没抽象逻辑，只有复制粘贴价值 - 注意嵌套调用陷阱：
.btn { .flex-center(); .border-radius(2px); }看起来干净，但如果.flex-center()里又用了@gap，而这个@gap在别处被重定义过，结果就不可控
为什么@import顺序错了会导致样式失效
Less编译不是按文件路径排序，而是按@import语句出现顺序“线性展开”。你以为base.less在最前就稳了？不一定。
-
@import "components/button.less";如果内部又@import "variables.less"，那它的variables.less就会插在当前文件中间，可能覆盖掉你原本想统一管理的主变量 - 解决方案只有两个：所有
@import集中写在入口文件顶部；或者严格分层——core/（变量+函数）、mixins/（纯逻辑）、components/（只用前两者，禁止互相@import） - 警惕
@import (optional)：它不会报错，但缺失文件时整个后续链可能静默失效，调试时根本看不出哪段没加载
如何让Less生成的CSS不膨胀又保留可读性
开发时开sourceMap、保留注释没问题，上线还留着// @debug: this is button hover就离谱。
- 编译时用
--clean-css压缩是基础，但更关键的是控制嵌套深度：Less允许无限嵌套，但.page .section .card .header .title这种选择器既难维护，又拖慢浏览器匹配速度 - 用
&代替重复父选择器时，别为了省几行代码写& &--active &::before——这生成的选择器权重爆炸，且无法被CSS-in-JS或现代框架的scope机制识别 - 真正影响体积的是
@media和:hover等伪类的重复输出。比如10个组件都写了@media (max-width: 768px) { ... }，Less不会自动合并，得靠.responsive-mixin统一收口
复杂点从来不在Less语法本身，而在于团队对“谁定义变量”“谁负责拆分文件”“谁决定@import层级”的共识是否落地到每个.less文件的第一行注释里。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
