Less需通过作用域隔离变量、限制嵌套≤3层、用&明确关系；Mixin应设默认参数、用when条件分支；开启source-map、禁用Less压缩、用//注释；@import须写死相对路径且不可拼接变量。
Less变量和嵌套怎么避免样式污染
Less不是CSS的替代品，而是帮你把重复、分散、难维护的CSS组织得更可控。关键在变量作用域和嵌套层级控制。
常见错误现象：.btn { color: @primary-color; } .modal { @primary-color: #ff6b6b; } —— 这样会污染全局变量，后续所有@primary-color都变了。
- 变量只在定义它的作用域内有效：用
scope包裹或写在.module类内部，避免顶层裸声明 - 嵌套层级建议不超过3层：
.card { .header { .title { ... } } }容易生成过长选择器，影响性能且难以覆盖 - 用
&明确父子关系，别依赖隐式嵌套：.btn { &:hover { ... } }比.btn { hover { ... } }更安全（后者会编译成.btn hover，语法错误）
Mixin传参和条件判断怎么写出可复用的样式逻辑
Less的.mixin()本质是带参数的CSS函数，但很多人把它当普通class用，导致逻辑耦合、难调试。
使用场景：按钮统一圆角+边框+过渡，但不同尺寸需要不同padding和font-size。
立即学习“前端免费学习笔记（深入）”；
- 参数必须设默认值：
.btn-style(@size: md, @color: @blue) { ... }，否则调用时漏传就编译失败 - 用
when做条件分支，别用JS式if：.btn-style(@size) when (@size = sm) { padding: 4px 8px; } - 避免在Mixin里写
@import或@media，它们应该由调用方控制上下文
示例：.btn(@type: primary) when (@type = primary) { background: @primary-color; }
如何让Less输出干净、可调试的CSS
开发时最怕改了Less却不知道对应哪段CSS，或者浏览器里看到一堆.a.b.c.d:hover::before根本没法定位。
性能/兼容性影响：嵌套过深 + 多重Mixin展开 → 选择器爆炸 → 浏览器渲染变慢，DevTools样式面板卡顿。
- 开启
source-map：webpack配置less-loader时加{ sourceMap: true }，Chrome里点CSS就能跳回Less源码 - 禁用
strictMath以外的压缩：生产环境用clean-css压缩，别让Less自己做compress: true，它会删掉空行和注释，断掉调试链路 - 用
//写行内注释（Less支持），别用/* */，后者会被原样输出到CSS里，增大体积
为什么@import路径错位会导致编译静默失败
Less的@import不是“加载”，而是“文本拼接”——它把目标文件内容直接插入当前行位置。路径不对，就插进来一堆语法错误，但Less默认不报错，只输出空CSS。
常见错误现象：修改@import "utils/mixins"后页面样式全丢，控制台无报错，dist/main.css为空。
- 路径必须相对当前文件，不是相对入口或webpack配置：
@import "../shared/vars"而不是@import "/src/shared/vars" - 扩展名不能省：
@import "reset.css"和@import "reset.less"行为完全不同（前者当纯CSS引入，后者才解析Less语法） - 用
@import (reference)引入仅作引用的文件（如只定义变量/Mixin，不输出CSS），避免重复注入
最容易被忽略的是：@import语句本身不支持变量拼接路径，@import "@{base}/theme" 是非法的，必须写死路径。
