less压缩分--compress(内置轻量压缩,仅删空格换行、保留结构与注释)和--clean-css(外置深度压缩,需单独安装,支持选择器合并、单位简化等,但可能因sourcemap或注释导致体积增大)。

Less 本身不提供“渐进式精简”配置,输出精简程度取决于你选的是哪个压缩路径:内置 --compress 还是外置 --clean-css。两者行为、效果、风险完全不同,不能混用或叠加。
用 --compress 做轻量级压缩
这是 lessc 自带的简易压缩,只做机械式清理,不改变选择器结构或声明逻辑,适合本地调试或 CI 中快速瘦身。
- 命令行直接启用:
lessc --compress input.less output.css - 它会删掉所有空格、换行、重复分号,但保留注释(
/* */)和@import展开结果 - 不会合并相同选择器、不会简化
0px→0、不会转#ff0000→red - 兼容性极好,几乎不会导致样式错位——比如
*display: inline这类 IE hack 会被原样保留
用 --clean-css 做深度压缩
这是独立工具链,功能强但副作用明显。必须全局安装:npm install -g clean-css-cli,否则运行报错 clean-css not found。
- 启用方式:
lessc --clean-css input.less output.css - 默认会合并重复选择器、简化单位(
10.0px→10px)、压缩颜色值、移除未使用属性(如color: inherit后又设color: #000) - 常见翻车点:开启
--sourcemap时,sourcemap 内容直接追加在 CSS 底部,体积可能暴涨;// 行注释会被当普通文本保留,撑大文件 - 修复建议:
--remove-source-maps --no-rebase --skip-imports这三个参数基本是必加组合
lessphp 中通过 setFormatter() 控制格式
PHP 环境下不用命令行,而是调用 lessc 类实例的 setFormatter() 方法,可选值只有三个字符串:
-
"classic":带缩进、换行、空格,适合开发调试 -
"compressed":等效于命令行--compress,删空格换行,不处理语义 -
"lessjs":输出风格与官方less.js编译器一致,对 sourcemap 和注释行为更保守
注意:setFormatter("compressed") 不等于 --clean-css,它没有选择器合并能力,也不要指望它能简化 rgba(0,0,0,1) → #000。
为什么 --clean-css 有时反而让 CSS 变大?
不是压缩失效,而是它把不该留的东西留住了。最常踩的坑就这几个:
- 源文件里有大量
/*! 重要版权声明 */——clean-css默认保留这类感叹号注释 - Less 源中混着
// 这是变量说明这种行注释,它们被编译成普通文本塞进 CSS - 用了
@import (multiple)或嵌套@import,--skip-imports没开,导致同一份变量文件被反复内联 - 开启了
--sourcemap但没配--remove-source-maps,整个 map 字符串明文写在 CSS 最后一行
真正决定输出体积的,从来不是“开了压缩”,而是“你有没有关掉那些默认开着的膨胀开关”。
前端入门到VUE实战笔记:立即使用
在学习笔记中,你将探索 前端 的入门与实战技巧!











