@warn 不中断编译但易被忽略，用于提示潜在问题；@error 强制终止编译，用于关键错误校验；判断标准是是否允许生成css：可生成用@warn，不可用则用@error。
@warn 不会中断编译，但容易被忽略输出
@warn 是你在编译阶段提示潜在问题的首选，比如参数不合理、使用了过时的 mixin、或某个值处于边界状态。它不会让构建失败，但终端会打印一行带 WARNING 前缀的信息。
常见错误现象：在 Vite 或 Webpack 项目里写了 @warn "font size too small"，却没在控制台看到任何输出——这通常是因为构建工具默认屏蔽了警告，或你用的是旧版 node-sass（@warn "xxx #{$val}" 在 node-sass@4.x 中直接报错，必须写成 @warn "xxx " + $val）。
实操建议：
- 用 Dart Sass（当前默认）时，
@warn输出到stdout，可被grep捕获；@debug则走stderr，需显式重定向 - 避免在循环中无条件触发：
@warn重复太多会刷屏，加守卫变量：@if not $warned { @warn "..."; $warned: true; } - 如果用
sass-loader，确保sassOptions启用了verbose: true，否则警告可能被吞掉
@error 必须用于关键校验，一触即停
@error 是唯一能强制终止编译的指令，适合拦截真正不可继续的错误，比如传入空值、map 键不存在、除零、或颜色名不在预设列表中。
常见错误现象：写 @if $color == null { @error "Color is required" }，结果编译仍通过——那说明 $color 其实不是 null，而是未定义（undefined），此时应改用 @if not variable-exists("color") 或 @if not map-has-key($colors, $color)。
实操建议：
- 不要只判
== null，Sass 中未声明变量、空字符串""、空 map()都不是null，要用对应函数检测：variable-exists()、map-has-key()、list-length() - 错误信息里插值要谨慎：
@error "Layer #{$layer} not found. Should be one of #{map-keys($z-indexes)}."—— 确保插值变量都已定义，否则先报“undefined variable”再报你的错误 - CI 环境下，某些 CI 工具会把
@error当作构建失败信号，这是预期行为；但若只想提醒不阻断，就别用@error
什么时候该用 @warn，而不是 @error？
核心判断标准就一条：这个情况是否允许生成 CSS？如果允许，用 @warn；如果生成的 CSS 逻辑上错误、不可用、或会破坏布局/可访问性，就必须用 @error。
使用场景对比：
-
@warn：字体单位是px但项目约定用rem；传入的$opacity是0，可能导致元素不可见但不崩溃 -
@error：调用z-index($layer)时$layer不在$z-indexesmap 中；fluid-font($min, $max)的$min > $max；rgba($color, $alpha)的$color根本不是颜色类型
性能影响几乎为零，但滥用 @error 会让协作开发者频繁卡在本地编译，而漏掉 @warn 可能让问题潜伏到上线后才暴露。
@warn 和 @error 的输出格式与调试定位
Dart Sass 输出的 @warn 和 @error 都带完整路径、行号、列号，但格式不同：@error 会显示 Error: 前缀并高亮错误位置（如 ^），@warn 只是普通文本行，没有视觉强调。
容易踩的坑：
- 在函数内部用
@warn或@error，但调用方没做错误处理，用户只看到警告/错误，却不知道是哪个组件或哪行调用触发的——建议在消息里带上上下文，例如：@warn "[mixins/_button.scss] $size must be 'sm', 'md', or 'lg'." - 插值内容如果是复杂结构（如 map、list），Dart Sass 会输出可读性差的原始表示（如
(primary: #007bff, secondary: #6c757d)），不如提前转成字符串描述 - 某些 IDE（如 VS Code 的 Sass 插件）不解析
@warn/@error行号跳转，得靠终端输出里的路径手动定位
最常被忽略的一点：这两个指令只在编译时起作用，无法用于运行时 CSS 错误检测；它们的价值不在“报错”，而在“让错误在最早可能的环节被看见”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
