@debug 只在 sass 编译成功时向终端 stderr 输出，且需 cli 加 --verbose、webpack 配 verbose: true 等环境支持；它不执行于语法错误后，输出位置须在决策点，类型需先用 type-of 验证。

@debug 不会出现在浏览器控制台，它只在 Sass 编译完成时向终端 stderr 输出原始值；编译失败时它根本不会执行——别把它当语法错误排查工具。

为什么 @debug 没输出，大概率是编译卡在了前面

@debug 是“幸存者”，不是“探路者”。只要 Sass 在它之前报错，就不会运行。常见中断点包括：

• $color: #ff0 少分号 → 语法错误，编译终止
• @debug $undefined-var → 直接报 Undefined variable "$undefined-var"
• map-get($config, 'key') 中 $config 是 null → Dart Sass 1.30+ 报 Argument '$map' of 'map-get' must be a map

实操建议：先清空终端，改一行代码后重新编译，**盯紧第一行红色报错**；解决完再加 @debug，否则永远看不到输出。

怎么写才真正看到值：终端、命令、配置三者必须对齐

@debug 默认被多数构建工具静默丢弃，不是你写错了，是环境没配好：

• CLI 直跑：必须加 --trace（旧版）或 --verbose（Dart Sass ≥1.40），例如：sass --verbose src/main.scss dist/main.css
• Webpack + sass-loader：需在 sassOptions 里设 verbose: true，否则日志被吞
• VS Code Live Sass Compiler 插件：**完全不支持** @debug —— 它用的是自研编译器封装，和 Dart Sass CLI 行为不一致，必须切回命令行

注意：@debug 输出到 stderr，而 @warn 输出到 stdout，管道操作（如 | grep debug）会捕获不到。

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

调试逻辑分支时，@debug 要打在“决策点”上，而不是结果后

查 @if 分支是否命中、@each 是否漏项、函数中间值是否异常，关键在位置：

• 在每个 @if 分支开头加，而非只在 @return 前：@if $mode == "dark" { @debug "[theme] dark mode triggered"; }
• 查 @each 时带上下文：@debug "key: #{$key}, value: #{$val}";，避免把 sm 和 480px 当成同一层
• 对 map 必须先 map-get() 再 @debug：@debug "md breakpoint:", map-get($breakpoints, md);，直接 @debug $breakpoints 会输出整张嵌套表，难定位

插值文字必须加引号：@debug "Got: #{$value}";，写成 @debug "Got:" $value 会报错。

容易被忽略的三个细节

很多人反复踩坑，就因为漏掉这些：

• @debug $null-var 会直接报错中断，不是输出 null；调试前先用 @debug type-of($var) 确认类型
• 在 @use 引入的模块里写 @debug，但主入口文件没引用该模块 → 编译器根本不会处理那部分代码
• CI 或 Vite 环境默认屏蔽 @debug，得查 loader 配置是否显式启用了 verbose 或 debug 选项

它不生成 CSS，不参与样式逻辑，纯属开发者本地诊断用——上线前删掉，别让它混进交付代码里。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！