在 SASS 中，指令是一個以「@」字元開頭的特殊符號。 SCSS 程式碼中使用了多種指令，指示編譯器以特定方式處理程式碼。
在本教學中，我們將學習使用 @error 和 @debug 指令分別拋出錯誤或偵錯程式碼。
錯誤指令表示為'@error'，我們可以在需要拋出錯誤的時候使用它。例如，如果某個條件不滿足，我們需要拋出錯誤。
使用者可以依照以下語法使用‘@error’指令來偵測SASS中的錯誤。
@error "error message";
在上述語法中，錯誤訊息被一個真正的錯誤所取代，我們需要將其顯示在輸出中。
在下面的範例中，我們在 SASS 中建立了「顏色」對象，其中包含不同的顏色及其十六進位代碼。
此外，我們建立了changeStyle()函數，它以顏色作為參數。它檢查地圖是否包含傳入參數顏色作為鍵。如果是，它會傳回顏色的十六進位代碼。否則，它會傳回一個錯誤。
我們透過將'blue'作為參數傳遞來呼叫changeStyle()函數，使用者在編譯SCSS時可以在終端機中看到錯誤。
$colors: (
green: #00ff00,
white: #ffffff,
);
@function changeStyle($color) {
@if map-has-key($colors, $color) {
@return map-get($colors, $style);
}
@error "Color is not included in the style: '#{$style}'.";
}
.container {
style: changeStyle(blue);
}
執行時，它將產生以下輸出−
#=> changed: C:\Data E\web devlopmentodedemo\scss\style.scss
{
"status": 1,
"file": "C:/Data E/web devlopment/nodedemo/scss/style.scss",
"line": 11,
"column": 60,
"message": "Undefined variable: "$style".",
"formatted": "Error: Undefined variable: "$style". on line
11 of scss/style.scss,
{$style}'. ";\r -----------------------------------------------^"
}
在下面的範例中，divide()函數以兩個值作為參數。如果第二個參數等於零，我們拋出一個錯誤。否則，我們傳回數字的除法結果。
// writing an scss code to use @error directive
@function divide($a, $b) {
@if $b == 0 {
@error "Division by zero is not allowed.";
}
@return $a / $b;
}
.one {
width: divide(10, 2);
}
.two {
width: divide(10, 1);
}
.three {
width: divide(10, 0);
}
在輸出中，使用者可以觀察到錯誤。
=> changed: C:\Data E\web devlopmentodedemo\scss\style.scss
{
"status": 1,
"file": "C:/Data E/web devlopment/nodedemo/scss/style.scss",
"line": 4,
"column": 12,
"message": "Division by zero is not allowed.",
"formatted": "Error: Division by zero is not allowed. on
line 4 of scss/style.scss, in file allowed. "; \r ----------------------^"
}
‘@debug’指令用於調試SASS程式碼。透過偵錯程式碼，開發人員可以知道程式碼中的確切錯誤位置。例如，我們可以透過偵錯程式碼列印變數的值，並且可以手動捕捉錯誤。
使用者可以依照下列語法來使用 SASS 的「@debug」指令。
@debug $var-name;
在上面的語法中，'var-name'被實際的變數名稱替換以列印其值，用於偵錯程式碼。
在下面的範例中，我們使用@debug指令來偵錯SASS的程式碼。我們定義了高度和邊框變數並儲存了各自的值。
在那之後，我們使用了@debug指令來列印高度和邊框變數的值，使用者可以在輸出中觀察到。
$height: 45rem;
$border: 2px, solid, blue;
div {
@debug $height;
@debug $border;
}
執行時，它將產生以下輸出−
#=> changed: C:\Data E\web devlopmentodedemo\scss\style.scss C:/Data E/web devlopment/nodedemo/scss/style.scss:5 DEBUG: 45rem C:/Data E/web devlopment/nodedemo/scss/style.scss:6 DEBUG: 2px, solid, blue Rendering Complete, saving .css file... Wrote CSS to C:\Data E\web devlopmentodedemo\css\style.css
使用者學會使用@error和@debug指令在編譯SASS程式碼時捕獲錯誤。我們可以使用@error指令拋出錯誤，並透過偵錯程式碼使用@debug指令來擷取錯誤。
以上是哪個指令用來偵測 SASS 中的錯誤？的詳細內容。更多資訊請關注PHP中文網其他相關文章！
