在 SASS 中，指令是一個以“@”字符開頭的特殊符號。 SCSS 代碼中使用了多種指令，指示編譯器以特定方式處理代碼。
在本教程中，我們將學習使用 @error 和 @debug 指令分別拋出錯誤或調試代碼。
@error指令在SASS中
錯誤指令表示為’@error’，我們可以在需要拋出錯誤的時候使用它。例如，如果某個條件不滿足，我們需要拋出一個錯誤。
語法
用戶可以按照以下語法使用‘@error’指令來檢測SASS中的錯誤。
@error "error message";
登錄后復制
在上述語法中，錯誤消息被一個真正的錯誤所替代，我們需要將其顯示在輸出中。
Example
的中文翻譯為：
示例
在下面的示例中，我們在 SASS 中創(chuàng)建了“顏色”對象，其中包含不同的顏色及其十六進制代碼。
此外，我們創(chuàng)建了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);
}
登錄后復制
輸出
在執(zhí)行時，它將產生以下輸出?
=> 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 -----------------------------------------------^"
}
登錄后復制
Example
的中文翻譯為：
示例
在下面的示例中，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中的作用
‘@debug’指令用于調試SASS代碼。通過調試代碼，開發(fā)人員可以知道代碼中的確切錯誤位置。例如，我們可以通過調試代碼打印變量的值，并可以手動捕捉錯誤。
語法
用戶可以按照以下語法來使用 SASS 的“@debug”指令。
@debug $var-name;
登錄后復制
在上面的語法中，’var-name’被實際的變量名替換以打印其值，用于調試代碼。
Example
的中文翻譯為：
示例
在下面的示例中，我們使用@debug指令來調試SASS的代碼。我們定義了高度和邊框變量并存儲了各自的值。
在那之后，我們使用了@debug指令來打印高度和邊框變量的值，用戶可以在輸出中觀察到。
$height: 45rem;
$border: 2px, solid, blue;
div {
@debug $height;
@debug $border;
}
登錄后復制
輸出
在執(zhí)行時，它將產生以下輸出?
=> 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 中的錯誤？的詳細內容，更多請關注www.92cms.cn其它相關文章！
