CSS预处理器Sass如何处理注释_区分编译后保留与丢弃的CSS注释语法

编译后是否保留注释取决于注释语法：/*...*/ 保留在所有模式中，/*!...*/ 在压缩模式下强制保留，// 仅存在于源码中且编译时完全删除。

编译后是否保留注释，完全取决于你用哪种语法写——不是配置项，也不是编译参数能改的。

/* ... */ 标准多行注释会出现在最终 CSS 中

这种写法和原生 CSS 一致，Sass 默认原样透传。无论你用 sass --style expanded 还是 --style compressed，只要没手动删掉，它就留在生成的 .css 文件里。

常见错误现象：误以为压缩模式会自动剔除所有 /* ... */，结果上线后发现版权信息或调试说明被删了——其实不是被删，是你根本没用这种注释。

• 适合写文档级说明、模块功能描述、兼容性备注
• 不适合写临时调试标记（会污染生产 CSS）
• 如果想在压缩模式下也强制保留，直接加 ! 变成 /*! ... */（见下一条）

/*! ... */ 重要注释在压缩模式下也强制保留

这是唯一一种能“穿透” --style compressed 的注释。Sass 编译器识别 /*! 开头就认为是“不可删”的元信息，比如许可证、版本号、作者声明。

立即学习“前端免费学习笔记（深入）”；

使用场景：CSS 文件顶部放 MIT 协议声明、公司内部组件库的版本水印、第三方依赖的归属标注。

• 必须紧挨着 / 后跟 !，中间不能有空格：/*! 版权所有 */ ✅，/* ! 版权所有 */ ❌
• 即使整个文件被压缩成一行，这行也会单独保留并换行输出
• 别滥用——每多一行 /*! */，生产包体积就多几个字节，积少成多

// 单行注释只存在于 .scss 源码中

// 是 Sass 自己的语法糖，编译时整行直接扔掉，连空格都不留。它不生成任何 CSS 内容，也不进 sourcemap 的原始位置映射。

容易踩的坑：有人把 // 当成“临时禁用代码”，结果删掉后发现样式异常——其实是注释掉了关键变量赋值或 @include，而自己没意识到它根本没参与编译。

• 只该用于开发期临时说明、TODO、WIP 标记
• 不能用来注释掉一段嵌套规则（Sass 不支持块级 //）
• 不要指望它在浏览器开发者工具里可见——它从源头就不存在

真正难的是权衡：要不要让团队看到源码里的 // 提示？要不要让客户看到 CSS 里的 /* 文档？这些不是语法问题，是协作约定问题。一旦定下规则，就得靠 lint 工具（比如 stylelint-scss）守住边界，而不是靠人眼检查。