sass的--style=compressed仅基础压缩，不移除所有空白、不简写数值/颜色、不合并重复规则、不删未用代码；需配合postcss+cssnano实现真正最小化。
为什么 sass --style=compressed 压缩后还是有空格和换行
因为默认的 --style=compressed 并非真正“删除所有空白”，它只做基础压缩：合并选择器、删注释、去冗余分号，但保留属性间换行和缩进。这在开发中便于调试，但上线前不够“最小化”。
- 真实最小化需要彻底移除所有空白字符（包括属性值内的空格，如
rgba( 255, 0, 0, 0.5 )→rgba(255,0,0,.5)） -
--style=compressed不处理数值简写（0px→0）、颜色缩写（#ff0000→#f00）或重复规则合并 - 它也不移除未使用的 CSS（比如 Sass 中被
@if false包裹但已编译进输出的代码）
Sass 本身不支持深度压缩，得靠 PostCSS 插件补位
Sass 编译器（Dart Sass / Node Sass）定位是“预处理器”，不是“生产优化器”。想达到接近 cssnano 级别的压缩效果，必须在 Sass 输出后接一道 PostCSS 流程。
- 推荐组合：
sass→postcss+cssnano（含autoprefixer） - 不要用
clean-css或老式在线压缩工具二次处理——它们可能破坏 Sourcemap 或 CSS 变量语法 - 注意
cssnano默认启用discardComments和normalizeWhitespace，但若项目用了 CSS 自定义属性或@layer，需手动关掉mergeLonghand避免误合并
如何在 package.json 里串起 Sass + PostCSS 最小化流程
避免写 Webpack 配置或引入构建工具，直接用 npm script 实现轻量可控的压缩链。
- 安装依赖：
npm install -D sass postcss postcss-cli cssnano autoprefixer - 加一条 script：
"build:css": "sass src/main.scss dist/main.css --style=expanded && postcss dist/main.css -o dist/main.min.css --use autoprefixer cssnano" -
--style=expanded是关键：先输出可读格式，再交给 PostCSS 处理；若直接用compressed，PostCSS 可能无法正确解析某些压缩态语法 - 生成的
main.min.css才是真正最小化结果，main.css仅用于本地调试
容易被忽略的兼容性陷阱：Sass 源码里的 @import 和 @use
用 @import 引入第三方库（比如 Bootstrap Sass 版）时，cssnano 可能因作用域问题漏压某些嵌套规则；而 @use 虽更现代，但它的命名空间机制会让 PostCSS 无法识别未导出的私有变量，导致压缩后出现无效声明。
- 验证方法：压缩前后对比
grep -o "{" main.css | wc -l和grep -o "{" main.min.css | wc -l，差值过大说明有规则被意外剔除 - 稳妥做法：把第三方库单独编译成 CSS 再引入，不混在主 Sass 流程里
- 若必须用
@use，确保所有要压缩的样式都通过@forward或@include显式暴露，别依赖隐式继承
.min.css。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
