@warn 和 @error 是保障 CSS 参数安全的核心守门员，需编译链路透出、开发者关注、CI 捕获；@warn 用于可降级的参数误用（如单位混用、过时调用），@error 用于必须熔断的关键错误（如非法断点、变量缺失）。
@warn 和 @error 不是“锦上添花”的调试玩具，而是大型团队里防止 CSS 参数误传、规避隐性样式崩坏的最小成本守门员。它们真正起效的前提不是写出来，而是编译链路能透出、开发者会看、CI 能捕获。
为什么写了@warn却没人看到
常见错误现象：在 _mixins.scss 里写了 @warn "font-size mixin 接收 px 值已废弃"，但同事改完保存毫无反应——不是代码没跑，是警告被吞了。
- Webpack 用户必须在
sass-loader配置中显式加verbose: true，否则sass-loader默认丢弃WARNING级日志 - Vite 用户默认用
vite-plugin-sass，它不透出@warn；得换成直接调用 Dart Sass 的原生 API，或手动配logger拦截 - CI 环境（如 GitHub Actions）里，Sass CLI 默认不设
--warn，且 stdout 被重定向或加了--quiet，警告彻底静默 - 旧版
node-sass@4.x不支持插值语法@warn "value: #{$val}"，会直接报错；必须写成@warn "value: " + $val
@warn 该用在哪种参数校验场景
核心判断标准：这个参数即使错了，是否仍能生成逻辑上可用的 CSS？能，就用 @warn；不能，必须用 @error。
- 单位混用提醒：在
font-size()mixin 中检查@if unit($size) == px and $size > 24px，提示改用rem，但继续编译 - 过时调用提醒：当有人还在用
grid-column-old($start, $end)，而新函数叫grid-col($s, $e)，@warn提示迁移路径 - fallback 缺失提醒：变量
$spacing-sm未定义时，@warn "using fallback 8px — check abstracts/_variables"，不中断流程 - 避免刷屏：循环内加守卫变量，
@if not $warned-grid { @warn "..."; $warned-grid: true !global; }
@error 必须卡死的关键参数点
一旦触发，CSS 就不该生成——这不是“提醒”，是“熔断”。用错地方会拖慢开发节奏，用对地方能拦住线上布局错乱。
- 检测变量存在性，不用
== null：Sass 中未声明变量不是null，得用variable-exists("color-primary")或map-has-key($colors, $name) - 关键断点非法：
@if $breakpoint-md → <code>@error "breakpoint-md must be a positive length" - 颜色名校验：
@if not map-has-key($colors, $name) { @error "Unknown color #{$name} in text-color()"; } - 除零风险：
@if $columns == 0 { @error "grid-columns cannot be zero"; }
和 PostCSS、Stylelint 的分工别搞混
@warn 和 @error 是编译期拦截，只管 SCSS 源码里的函数调用、mixin 入参、变量引用；它不管 HTML 里写的 class="old-button"，也不管最终 CSS 字符串里有没有 px。
- 想扫 HTML 中废弃类名？得靠
posthtml或自研扫描脚本，@warn无能为力 - 想统一转
px到rem？那是postcss-pxtorem的活，@warn只能在 Sass 层提前卡住“人写的 px” - 想规范命名风格？
Stylelint管.btn-primary是否符合 BEM，@warn管你调没调make-btn($variant: primary) - 真正容易被忽略的是：同一个错误，在 Sass 层用
@error卡一次，在 CI 里用Stylelint再报一次，不是重复，是分层兜底
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
