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