如何修复Sass编译生成的CSS代码中多余的空格和换行？-css教程-PHP中文网

--style=compressed仅做token级清理，不处理行注释、嵌套换行、插值空字符串等；需配合postcss+cssnano才能真正压缩体积、剔除冗余规则。

如何修复sass编译生成的css代码中多余的空格和换行？

--style=compressed 能删掉部分空格和换行，但不是万能的——它只做 token 级清理，不重排结构、不合并规则、不处理行注释，很多“多余空行”根本删不掉。

常见错误现象：sass input.scss output.css --style=compressed 执行后，CSS 文件体积几乎不变，开发者工具里还能看到原始注释、空行甚至缩进。

你用了 // 行注释——--style=compressed 只删 /* */ 块注释，对 // 完全无视
源文件里有深层嵌套（比如 &__header { &--active { ... } }），Sass 会按语法逻辑保留换行位置，不是“全文压成一行”
你在 VS Code 用 Live Sass Compiler 插件，但没改 liveSassCompile.settings.formats，插件默认走 expanded 格式，--style 参数根本没生效
某些 @mixin 里拼了空字符串插值（如 #{""}）或未闭合的 #{} ，--style=compressed 无法识别这类语法生成的空行

它只在命令行直调或构建工具明确透传时才生效；多数现代工具链（Vite/Webpack）默认不把该参数传给 Dart Sass。

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

命令行单文件编译：写全路径，加 --no-cache 避免缓存干扰，例如 sass src/main.scss dist/main.css --style=compressed --no-cache
Vite 项目中：必须在 vite.config.ts 的 css.preprocessorOptions.sass 里显式设 api: 'dart-sass'，否则 Vite 默认用简易处理器，忽略 --style
Webpack + sass-loader：在 sassOptions 里设 outputStyle: 'compressed'，注意这仅影响 Sass 层输出，后续仍需 css-minimizer-webpack-plugin 二次压缩
确认没开 sourceMap：它会在 CSS 末尾追加 base64 字符串，直接让体积 +100KB+；设 sourceMap: false，别依赖默认值

--style=compressed 是 Sass 的“轻量开关”，不是终点。只要用了 Vite/Webpack 等现代构建工具，就该把压缩交给 PostCSS——那里才能安全合并选择器、剔除无效规则、统一处理注释策略。

PostCSS 配合 cssnano：能合并重复声明、剔除未用规则、压缩 calc()、处理自定义属性，--style=compressed 做不到这些
用 postcss-discard-comments 或 cssnano 的 discardComments 选项，可统一清除所有注释（包括残留的 // 行注释转成的 /* */）
若用了 PurgeCSS 或 UnoCSS，它们必须放在 Sass 编译之后、CSS 压缩之前，否则无法扫描真实模板内容
别指望 --style=compressed 解决体积问题——浏览器解析瓶颈从来不是空格换行，而是选择器数量、匹配复杂度和未用规则；空行只是表象，冗余才是根因