根本原因是未加括号的mixin声明（如.clearfix）被Less误解析为普通类选择器，导致输出空规则并带空行；//注释编译时被彻底剥离，/ /则可能被后续压缩器删除。
Less 编译生成的 CSS 中出现“意外”的空行和注释，不是编译器出错，而是源码写法、工具链配置、压缩阶段介入顺序三者共同作用的结果——空行往往来自未加括号的 mixin 声明或嵌套结构残留，注释消失或残留则取决于你用的是 // 还是 /* */，以及后续是否经过 css-minimizer-webpack-plugin 或 clean-css 等压缩器。
为什么 .clearfix 被编译成空规则并带空行？
这是最隐蔽也最常被忽略的源头：Less 把没括号的 .clearfix 当作普通类选择器，而非 mixin。它不依赖调用，只要定义存在，就会输出 .clearfix { } 这种空规则，且自带换行。
- 全局搜索正则
\.([a-zA-Z0-9\-]+)\s*\{，能快速定位所有漏写括号的声明（如.sr-only、.visually-hidden） - 必须统一改为
.clearfix()、.sr-only()—— 括号是 Less 区分 mixin 与类的唯一标识 -
@import (reference)文件里若混有无括号声明，也会被输出；而(reference)本意是“只解析不输出”，结果因语法误判反而污染了 CSS - 这类空规则无法被
--compress或cssnano识别为冗余内容，压缩器只删空白，不删合法但为空的规则
为什么 // 注释消失了，而 /* */ 有时也在 CSS 里找不到？
// 是 Less 源码级注释，编译时彻底剥离，对最终 CSS 零影响；/* */ 默认保留，但能否留到上线产物里，取决于构建流程中是否有压缩器静默删除它。
- Webpack/Vite 开启
minimize: true后，css-minimizer-webpack-plugin默认删掉所有/* */，除非显式配置preserveComments: /Copyright|v\d+\.\d+\.\d+/ - 不要把版本号写成孤立变量
@version: "1.2.0";再拼进注释/* v@{version} */—— 旧版 Less 可能因变量未被属性引用而优化掉整段注释 - 直接写
/* v1.2.0 — @import "reset.less"; */更稳妥，上线前务必用curl your-site.com/style.css实际验证 - VS Code 里看到红波浪线报
//错误？那是 Stylelint 在按标准 CSS 校验，//本身就不合法，别指望它进 CSS
为什么 --compress 没删掉空行，甚至体积几乎不变？
--compress 只做 token 级精简：删空格、换行、块注释，但它不重排结构、不合并选择器、不剔除重复规则，更不会修复源码里的嵌套空行或 & :hover 这类空格导致的无效换行。
- 如果你的
.btn { .icon(); }编译后是.btn .icon { }，那多出来的换行可能来自.icon()定义体内的空行，或其父级嵌套层级本身 - VSCode Live Sass Compiler 插件默认走
expanded格式，你加的--style=compressed参数根本没传给编译器 - Vite 用户必须在
vite.config.ts的css.preprocessorOptions.sass里明确设api: 'dart-sass'，否则 Vite 用内置简易处理器，无视该参数 - 真正要压体积，得靠 PostCSS 阶段：用
cssnano合并选择器、剔除无效规则，--compress只是前置轻量处理
空行和注释问题从来不是独立存在的——它们总是和未收敛的 @import 链、无括号 mixin、压缩器配置错位、编码 BOM 干扰等混在一起。解决时别只盯着“删空行”这个动作，先确认编译后 CSS 里那些空规则是不是真由 .xxx 引起，再检查 /* */ 是否被下游工具吃掉。最麻烦的不是怎么删，而是删完发现样式逻辑已因空格或作用域错乱悄悄失效了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
