Sass 除錯：@debug、@warn 與 @error 的分工
Sass 沒有中斷點，除錯靠的是把值印出來。三個指令對應三種嚴重程度：
| 指令 | 做什麼 | 編譯會繼續嗎 | 用在 |
|---|---|---|---|
@debug | 印出值 | 會 | 開發時暫時查看 |
@warn | 印出警告 | 會 | 標記棄用、提醒 |
@error | 印出錯誤並中斷 | 不會 | 參數錯誤 |
@debug
$theme: (primary: #2965f1, danger: #e03131);
@debug $theme;
@debug map.get($theme, primary);
@debug "目前的斷點：#{$bp}";輸出（在終端機）：
test.scss:3 Debug: (primary: #2965f1, danger: #e03131)
test.scss:4 Debug: #2965f1會帶上檔名與行號。
提交前記得刪掉
@debug 留在程式碼裡會讓每次建置都刷一堆訊息，真正的警告就淹沒在裡面了。
搭配 inspect 看清楚原貌
@use "sass:meta";
@debug "bold"; // bold ← 引號不見了
@debug meta.inspect("bold"); // "bold" ← 看得出是帶引號字串@debug 會轉成人類可讀的形式，引號就消失了。除錯引號問題與巢狀 map 時一定要包 meta.inspect()，見 sass:meta。
@warn
@mixin float-left {
@warn "float-left 已棄用，請改用 flexbox 或 grid。";
float: left;
}輸出：
Warning: float-left 已棄用，請改用 flexbox 或 grid。
test.scss 8:3 float-left()
main.scss 12:3 root stylesheet會附上呼叫堆疊，看得出是誰用了它，這正是 @warn 比 @debug 適合標記棄用的原因。
標記棄用的完整寫法
@mixin respond($bp) {
@warn "respond() 已於 2.0 棄用，請改用 respond-to()。";
@include respond-to($bp) { @content; }
}好的棄用訊息要有三件事：什麼被棄用、從哪一版開始、改用什麼。
@error
@use "sass:map";
@function color-of($name) {
@if not map.has-key($theme, $name) {
@error "色彩 #{$name} 不存在。可用的有：#{map.keys($theme)}。";
}
@return map.get($theme, $name);
}Error: 色彩 primry 不存在。可用的有：primary, danger, success。
╷
6 │ @error "色彩 #{$name} 不存在。可用的有：#{map.keys($theme)}。";
│ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
╵編譯直接停止。 沒有這一層的話，map.get() 會回傳 null，那行宣告安靜消失，你要到看見畫面壞掉才會發現打錯字。
什麼時候該用 @error
| 情況 | 用 |
|---|---|
| 參數型別錯誤 | @error |
| map 的鍵不存在 | @error |
| 數值超出合理範圍 | @error |
| 用了舊 API，但還能運作 | @warn |
| 只是想看看某個值 | @debug |
判斷準則
繼續編譯下去只會產生錯誤的樣式 → @error。 讓它安靜地產出壞 CSS，遠比中斷編譯糟糕。
寫出有用的訊息
// ❌ 沒有資訊
@error "參數錯誤";
// ✅ 說明期待什麼、收到什麼、怎麼改
@error "square() 的 $size 必須是數字，收到 #{meta.inspect($size)}（#{meta.type-of($size)}）。範例：square(48px)。";訊息裡可以用 插值 帶入實際的值。
訊息出現在哪裡
都印到標準錯誤，也就是終端機，不是瀏覽器的主控台。
| 環境 | 在哪看 |
|---|---|
sass CLI | 直接顯示在終端機 |
| Vite / Webpack | 開發伺服器的終端輸出 |
| VS Code 擴充套件 | 該擴充套件的輸出面板 |
用 Vite 的人最常問「為什麼沒印出來」
因為跑去看瀏覽器主控台了。Sass 是在 Node 端編譯的，訊息在跑 npm run dev 的那個終端機裡，見 與建置工具整合。
讓第三方的警告安靜
Bootstrap 這類套件常帶大量棄用警告：
npx sass --quiet-deps src/main.scss dist/main.css--quiet-deps 只隱藏 相依套件 的警告，自己專案的照常顯示。
不要用 --quiet
那會把所有警告一起關掉，包括你自己程式碼裡的。
常見問題
三個指令怎麼選？
@debug 是開發時暫時印出值，提交前應該刪掉；@warn 用來提醒但讓編譯繼續，適合標記棄用；@error 直接中斷編譯，用在參數錯誤這種繼續下去也只會產生壞樣式的情況。
訊息會出現在哪裡？
都印到標準錯誤，也就是終端機。用 CLI 編譯時直接看得到；用 Vite 或 Webpack 時會出現在開發伺服器的終端輸出，不是瀏覽器的主控台。
為什麼印出來的字串沒有引號？
@debug 會把值轉成人類可讀的形式，引號就被拿掉了。想看清楚原始樣貌，包括引號與 map 的完整結構，要改用 meta.inspect() 包起來再印。
第三方套件的警告很吵怎麼辦？
編譯時加上 --quiet-deps 參數，它只會隱藏來自相依套件的警告，自己專案的警告仍然照常顯示。不要用全域靜音把所有警告一起關掉。
