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" 是非法的，必须写死路径。
评论(0)