Less默认原样拼接、不压缩不去重，精简需三阶段策略：编译前用@import (once)防重复、收口变量至单入口；编译中用&-modifier扁平嵌套、禁用通配符导入；编译后交PostCSS深度压缩，禁用lessc内置压缩。
Less 本身不压缩、不去重、不树摇，生成体积大不是配置没开对，而是默认行为就是“原样拼接+线性展开”。精简必须靠组合策略：编译前防重复、编译中控结构、编译后交由专业工具压。
@import (once) 是防重复输出的底线操作
反复 @import "mixins.less" 会把同一份样式规则复制 N 遍进最终 CSS。Less 不做去重，只做文本插入。
-
@import (once)能确保相同路径只生效一次，但注意："./mixins"和"../shared/mixins"被视为两个文件 - 所有公共变量、函数、mixin 必须收口到单个入口文件（如
variables.less），再用@import (once)引入 - 禁用通配符导入（如
@import "components/*.less"），它在大多数 Less 版本中不被支持，且破坏依赖可预测性 - 构建时开启
strictImports: true，让缺失文件立刻报错，避免静默跳过导致样式遗漏
嵌套必须用 &-modifier 扁平化输出
三层以上嵌套（如 .card .header h1）直接推高选择器权重和体积，且难以覆盖。Less 的 & 不是语法糖，是控制编译输出结构的关键开关。
- 写
.card { &-header { color: red; } }→ 输出.card-header，不是.card .card-header - 避免在
@media块内深层嵌套，否则媒体查询会包裹大量冗余选择器；改用.card@media-md { ... }或配合extend -
extend比 mixin 更适合复用样式逻辑——它在编译期合并选择器，不复制声明块，比如.btn-primary:extend(.btn) {}不会多出一行.btn的重复定义
压缩必须交给 PostCSS，别信 lessc --clean-css
lessc --clean-css 只做基础空格/注释清理，无法处理 calc() 保留、兼容性 hack、/* @preserve */ 注释保护等生产级需求。
立即学习“前端免费学习笔记（深入）”；
- 正确顺序：Less 编译 → 输出标准 CSS → 交给
cssnano或clean-css处理 - Webpack 中，确保
less-loader后接css-loader+mini-css-extract-plugin+cssnano插件链 - 关闭 Less 的
sourceMap（sourceMap: false）和math: always（改用math: strict），否则calc(100% - 20px)可能被提前算成无效值
真正难的不是加功能，是管住自己别嵌套、别重复 import、别在 Less 里幻想运行时逻辑——它只是编译期文本处理器，所有“智能”都得靠你提前设计好结构和约束。生产环境体积失控，90% 源于开发期没设边界。
