@debug 在编译时将变量或表达式原始值（如10px、rgba(0,0,0,0.5)）输出到终端，不生成css，用于快速验证逻辑；但遇null或未定义变量会报错中断编译。
@debug 会输出什么，什么时候该用它
它只在编译时把值打印到终端，不生成任何 CSS，适合快速验证变量、函数返回值或计算逻辑是否符合预期。但别指望它能在浏览器里看到——它压根不进最终样式表。
-
@debug输出的是原始 Sass 值（比如10px、rgba(0, 0, 0, 0.5)、map-get($colors, primary)的结果），不是字符串拼接后的文本 - 调试嵌套过深的
@function时，在关键计算步骤后加@debug $result比反复注释/解注释更直接 - 注意：如果
$value是null或未定义变量，@debug $value会报错并中断编译，不是静默跳过 - CI 环境或某些构建工具（如 vite + sass）可能默认屏蔽
@debug输出，得查对应 loader 配置是否启用了verbose或debug选项
@warn 和 @debug 的核心区别在哪
@warn 同样只在编译期触发，但它不会中断流程（除非你手动配置了「警告转错误」），更适合提示使用者潜在问题；而 @debug 纯属开发者自用，不该出现在交付给别人的 mixin 或函数里。
-
@warn的消息会被构建工具归类为 warning，部分 IDE（如 VS Code + Sass 插件）能高亮显示，@debug则完全依赖终端输出 - 当你写一个公共
@mixin，发现用户传了过时参数（比如$size: small已被废弃），用@warn "The $size argument is deprecated, use $scale instead"更友好 -
@warn支持插值，但不能直接插函数调用：@warn "Got #{$color}";✅，@warn "Got #{lighten($color, 10%)}❌（会报错，需先赋值再插） - 重复触发同一个
@warn（比如循环里没加 guard）会导致终端刷屏，建议加条件判断：@if not $warned { @warn "..."; $warned: true; }
Sass 编译器对调试指令的兼容性影响
Dart Sass（当前官方推荐）完全支持 @debug 和 @warn，但 Node Sass（已停更）在较老版本中对 @debug 输出格式不一致，且不支持带插值的 @warn。
- 如果你还在用
node-sass@4.x，@warn "Value: #{$val}"会直接报错，必须写成@warn "Value: " + $val - Dart Sass 默认把
@debug输出到 stderr，而@warn输出到 stdout —— 这会影响管道处理（比如sass src/ | grep debug就捕获不到） - 某些构建封装（如 webpack 的
sass-loader）默认会把@warn转成 webpack warning，但@debug可能被吞掉，需设置implementation和sassOptions.verbose = true - 不要在
@if条件分支外直接写@debug $var，如果$var是局部作用域变量，编译时可能报「undefined variable」
调试指令容易被忽略的副作用
它们本身不参与 CSS 生成，但会拖慢编译速度——尤其在大型项目里高频使用 @debug，或在深度循环中漏掉 guard 的 @warn，会让 dev server 启动和热更新明显变卡。
立即学习“前端免费学习笔记（深入）”；
- 上线前务必全局搜索
@debug并删掉，它不像console.log那样有环境开关，Sass 里没有process.env.NODE_ENV这种东西 -
@warn不会阻止 CSS 输出，但如果用户无视警告继续用错误参数，可能导致生成无效样式（比如margin: null），这种 bug 很难定位 - 所有调试指令都不可被 CSS 自定义属性或 JS 运行时读取，纯属编译期辅助——别试图用它做「运行时日志」
