在 SASS 中的錯誤處理

本文將說明 SASS 的錯誤處理方式。

我們會說明如何透過 SASS 的錯誤、警告和除錯功能，來建立穩健的樣式設計。

YouTube Video

在 SASS 中的錯誤處理

什麼是 SASS 的「錯誤處理」？

SASS 並不是能夠處理執行時例外的語言，但它提供了在編譯時偵測到無效狀態並明確通知開發者的機制。這有助於防止錯誤的值或設計失誤在沒有人注意到的情況下被輸出成 CSS。

在 SASS 中，錯誤處理不僅僅是「遇到錯誤時停止」，也是直接在程式碼中表達設計前提的方法。主要有四種方法可以做到這一點。

當偵測到設計上禁止的狀態時，立即中斷編譯。

以警告訊息通知問題，但編譯會繼續進行。

輸出變數與計算結果，協助確認值的流動與內部狀態。

• 防護條件（@if） 事先檢查輸入值與前置條件，預防尚未發生的問題。

@error：可靠地中斷嚴重錯誤

對於設計上絕對不能接受的狀態，請使用 @error。如果傳遞了錯誤的值，會立即使編譯失敗。

1@mixin set-width($width) {
2  @if type-of($width) != number {
3    @error "Width must be a number.";
4  }
5
6  width: $width;
7}

• 此 mixin 若收到非數字類型的參數，則會中止建置。這在作為『最終保險措施』防止不當使用時非常有效。

@error 實用範例：包含單位檢查

即使是數字，單位使用錯誤也可能造成問題。在 SASS 中可以利用 unit() 來驗證單位。

1@mixin set-padding($value) {
2  @if unit($value) != "px" {
3    @error "Padding must be specified in px.";
4  }
5
6  padding: $value;
7}

• 這樣一來，若誤將 1rem 或 % 傳入，也能立即被偵測出來。將設計規範以程式碼方式強制執行是很重要的。

@warn：用於棄用通知與警告

@warn 用於通知不立即導致錯誤，但不被期望的狀況。由於仍會產生 CSS，很適合於漸進式遷移時使用。

1@mixin legacy-color($color) {
2  @warn "legacy-color is deprecated. Use theme-color instead.";
3
4  color: $color;
5}

• 這個 mixin 發出警告時，不會破壞現有程式碼。這在大型專案的重構期間特別有效。

條件式警告發出的範例

配合值域判斷使用時會更有實用價值。

1@mixin set-opacity($value) {
2  @if $value < 0 or $value > 1 {
3    @warn "Opacity should be between 0 and 1.";
4  }
5
6  opacity: $value;
7}

• 可以提示設計上的錯誤而不會中斷開發流程。@warn 的優勢在於你可以自由決定「嚴格程度」。

@debug：視覺化數值流向

@debug 更像是一種觀察與排查工具，而不是用於錯誤處理。可以檢查計算結果與變數內容。

1$base-size: 8px;
2$spacing: $base-size * 3;
3
4@debug $spacing;

• 由於在編譯時輸出數值，有助於驗證複雜的計算邏輯。請勿在正式程式碼中保留，僅限於調查和除錯時使用。

使用 @if 進行防護設計最為重要

實際上，預先設計檢查輸入值機制 比單純依賴 @error 或 @warn 更加重要。

1@mixin grid-columns($count) {
2  @if type-of($count) != number or $count <= 0 {
3    @error "Column count must be a positive number.";
4  }
5
6  grid-template-columns: repeat($count, 1fr);
7}

• 如此明確寫出『正確的前置條件』，你設計的 mixin 或 function 就能一目了然。

函數中的錯誤處理（@function）

在函數中也可以用相同的方法來處理錯誤。這在計算邏輯中特別重要。

1@function divide($a, $b) {
2  @if $b == 0 {
3    @error "Division by zero is not allowed.";
4  }
5
6  @return $a / $b;
7}

• 可以在產生 CSS 之前偵測邏輯錯誤，讓設計系統的安全性更高。

實務運用指引

最後，總結這些選擇的依據，特別聚焦於實際運作時常見的難以判斷之處。

• 當明確發現設計違規或臭蟲時 請使用 @error。產出錯誤狀態的 CSS 直接導致 bug，因此要立即中斷編譯。

• 當需通知棄用或只需警告時 請使用 @warn。可以在不破壞現有程式或遷移中的程式下，提前告知未來潛在問題。

• 當想確認數值流向或計算結果時 請使用 @debug。作為暫時性確認邏輯或查找原因的手段很有效。

• 當想驗證所有前置條件，例如輸入值或使用條件時 請搭配 @if 進行防護檢查。明確地寫出假設，可以預防問題於發生前就被阻止。

由於 SASS 是『幾乎什麼都能寫』的語言，所以在程式碼中明確定義不希望出現的狀態，能讓樣式更容易維護、出錯率更低。

總結

SASS 的錯誤處理是明確表達與持續強制執行樣式設計假設與規則的機制。

• 錯誤的存在是為了讓無效狀態不會被忽略，並能即時被中止。
• 警告的作用是作為未來安全變更或遷移時的參考，而不會讓東西立刻壞掉。
• 防護設計的目的是事前預防問題發生，而不是事後處理。

正確理解並運用這些機制，SASS 不再只是 CSS 的延伸，而是可明確表達設計意圖與約束條件、高可靠性的樣式語言。

您可以在我們的 YouTube 頻道上使用 Visual Studio Code 來跟隨上述文章一起學習。 請也查看我們的 YouTube 頻道。

YouTube Video