该用@error而非@warn的关键是参数非法是否导致css不可用、不可预测或破坏布局：@error强制终止编译，适用于必需参数缺失、键不存在、除零等不可恢复错误；@warn仅提示并继续编译，适用于非标准颜色名、弃用参数等仍有fallback的场景。
什么时候该用 @error 而不是 @warn
关键看参数非法是否会导致生成的 CSS 不可用、不可预测或破坏布局。@error 会立刻终止编译，适合拦截真正不可恢复的问题；@warn 只输出黄色提示，编译继续，适合提醒但不影响产出的情况。
常见错误现象：@error "Missing $color" 没触发——其实 $color 并不是 null，而是未定义（undefined），此时应改用 @if not variable-exists("color") 或 @if not map-has-key($theme, "primary")。
- 必须用
@error的场景：必需参数为null/ 未定义 / 空 map、map-get()键不存在、除零、颜色名不在白名单中、单位缺失导致样式被浏览器忽略（如margin: 16;） - 适合用
@warn的场景：传了非标准颜色关键字（如"red"）、用了已弃用的参数名、数值在边界但仍有 fallback（如字体大小0.5rem太小但合法） - 别只判
== null：Sass 中""、()、0都不是null，要用variable-exists()、map-has-key()、list-length()等函数精准检测
如何安全地在 @error/@warn 中插值
插值内容必须是已定义、类型安全的变量或表达式结果，否则 Sass 会在报你错之前先报「undefined variable」或「invalid operation」。
常见错误现象：@error "Expected #{$val}, got #{lighten($val, 10%)}" 直接编译失败——因为 lighten() 不能作用于字符串或未定义值，且 @error 不支持在插值中调用函数。
- 插值前务必确认变量存在：
@if variable-exists("size") and type-of($size) == "number" { @error "Invalid size: #{$size}"; } - 避免函数调用插值：
$lightened: lighten($color, 10%); @warn "Lightened: #{$lightened}";✅，而不是直接插在@warn字符串里 ❌ - 拼接路径或上下文能加速定位：
@error "[button.scss] $variant '#{$v}' not in map-keys($variants)"，比纯消息更可靠 - 对
calc()、var(--x)等表达式，unit($val)返回空字符串，别误判为“无单位”
在 mixin 和 function 中做前置校验而非兜底
@error 和 @warn 必须放在逻辑执行前，否则无效。放在 @mixin 最后一行“兜底”，等于永远不触发。
常见错误现象：写了一个 @mixin spacing($val)，把 @if not _is-length($val) { @error "..."; } 放在 padding: $val; 后面——编译器根本不会执行到那里，因为前面已经出错了（比如 $val 是字符串，padding: "16" 会先报语法错）。
- 校验永远放第一行：
@mixin button-size($size) { @if not map-has-key($sizes, $size) { @error "..."; } font-size: map-get($sizes, $size); } - 对复合判断（如响应式断点），先用
type-of()和unit()过滤，再比较数值：@if type-of($mobile) == "number" and type-of($desktop) == "number" and unit($mobile) == unit($desktop) and $mobile >= $desktop { @error "..."; } - 函数中校验后要
@return安全值（如0px或 fallback map），否则后续逻辑可能因返回null报错
Webpack/Vite 项目中警告/错误不显示的排查点
@warn 和 @error 在构建工具里容易静默失效，不是代码问题，而是环境配置没对上。
常见错误现象：写了 @warn "Deprecated" 却没看到终端输出；CI 构建成功但本该失败的 @error 被跳过。
- sass-loader 默认不输出警告，需显式启用：
sassOptions: { verbose: true } - Vite 项目中
@warn只出现在终端日志，不会进浏览器控制台；@debug更容易被吞掉，建议只在开发阶段临时加 - CI 脚本若含
sass --quiet或重定向 stdout（如> /dev/null），所有@warn都会被丢弃 - 用的是旧版
node-sass@4.x？插值语法@warn "X #{$y}"会直接编译失败，得改成@warn "X " + $y - 警告写在未被
@use或@import的文件里，或者封装在从未被调用的@function中，它根本不会执行
@warn，而是确保它被调用、被看见、被响应。最容易被忽略的是：**校验逻辑必须收口到实际被引用的 @mixin 或 @function 中，而不是散落在未加载的工具文件里**。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
