less编译避免重复css需用@import (once)防止多次导入，统一入口文件、禁用通配符导入，启用strictimports；嵌套用&-modifier扁平化；压缩交由postcss处理，禁用less merge功能，避免绝对url导入。
Less编译时如何避免重复CSS规则
Less本身不自动去重，import多次同一文件（比如反复@import "mixins.less"）会直接导致样式重复输出。生产环境体积膨胀常源于此。
解决办法是用@import (once)显式声明只导入一次：
@import (once) "mixins.less"; @import (once) "variables.less";
注意：(once)仅对相同路径生效；若路径带相对层级差异（如"./mixins" vs "../shared/mixins"），仍会被视为不同文件而重复引入。
- 所有公共
@mixin、@function、变量统一收口到单个入口文件，再用(once)导入 - 禁用
@import通配符（如@import "components/*.less"），这类写法在多数Less版本中不被支持，且易引发不可控依赖顺序 - 构建时开启
strictImports: true（通过less-loader或命令行），让缺失文件立即报错，避免静默跳过导致样式遗漏
如何用Less的命名空间+作用域控制选择器生成
滥用嵌套是CSS体积暴涨的主因之一。比如.card { .header { h1 { color: red; } } }会输出三层嵌套选择器，而实际可能只需要.card-header h1。
用&和命名空间可精准控制输出结构：
.card {
&-header { font-weight: bold; }
&-body { padding: 1rem; }
&-footer { text-align: center; }
}
编译后仅生成.card-header、.card-body、.card-footer三个扁平类名，无嵌套层级膨胀。
- 避免三层以上嵌套；超过两层时，优先考虑用
&-modifier替代& & & - 不要在
@media块内深层嵌套——它会让媒体查询包裹大量冗余选择器，改用.card@media-md { ... }配合extend更可控 -
extend比mixins更适合复用样式逻辑，因为extend在编译期合并选择器，不复制声明块
构建阶段Less压缩与CSS后处理的协作要点
Less编译器（如lessc）自带--clean-css参数，但仅做基础压缩；真正有效的体积削减需交给PostCSS生态。
关键在于顺序：必须先Less编译成CSS，再交由cssnano或clean-css处理，否则/* @preserve */等注释、兼容性hack可能被误删。
- 关闭Less的
sourceMap输出（sourceMap: false），生产环境不需要映射文件 - 禁用
math: always（默认值），改用math: strict，避免calc(100% - 20px)被Less提前计算成无效值 - 若用Webpack，
less-loader后接css-loader+mini-css-extract-plugin+css-minimizer-webpack-plugin，后者内置cssnano，支持discardComments: { removeAll: true }彻底清空注释
为什么不能依赖Less的merge功能减少体积
Less 4.0+引入了merge（如margin+: 10px;），但它只是语法糖，编译后仍生成多条声明，无法合并为margin: 10px 20px这类简写——体积没变，可读性还下降。
真正压缩边距/背景/字体等复合属性，靠的是cssnano的mergeLonghand插件，它运行在CSS字符串层面，与Less无关。
- 写Less时坚持用标准简写（
margin: 0 1rem;），别依赖+语法“偷懒” -
merge在IE兼容模式下行为不稳定，某些组合会产出非法CSS，生产构建应禁用 - 体积优化的重心不在Less语法特性，而在编译链路：输入精简（一次导入、扁平嵌套）→ 输出净化（移除注释、合并声明、删除未用规则）→ 传输压缩（Gzip/Brotli）
最常被忽略的一点：@import路径别用绝对URL（如@import "https://cdn.example.com/normalize.less"），这会让构建工具无法静态分析依赖，导致无法剔除未引用的规则，也阻断了本地缓存和tree-shaking机会。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
