哪個指令用於檢測 SASS 中的錯誤？

---

在 SASS 中，指令是一種以“@”字元開頭的特殊符號。SCSS 程式碼中使用了各種型別的指令，指示編譯器以特定方式處理程式碼。

在本教程中，我們將學習 @error 和 @debug 指令，分別用於丟擲錯誤或除錯程式碼。

@error 指令在 SASS 中

error 指令表示為“@error”，當我們需要丟擲錯誤時可以使用它。例如，如果某些條件不滿足，我們需要丟擲錯誤。

語法

使用者可以按照以下語法使用“@error”指令來檢測 SASS 中的錯誤。

@error "error message";

在上述語法中，錯誤訊息被替換為實際的錯誤，我們需要在輸出中顯示該錯誤。

示例

在下面的示例中，我們在 SASS 中建立了“colors”物件，其中包含不同的顏色及其十六進位制程式碼。

此外，我們建立了 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 devlopment
odedemo\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 devlopment
odedemo\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 程式碼。透過除錯程式碼，開發人員可以知道程式碼中確切的錯誤位置。例如，我們可以透過除錯程式碼列印變數的值，並手動捕獲錯誤。

語法

使用者可以按照以下語法使用 SASS 的“@debug”指令。

@debug $var-name;

在上述語法中，“var-name”被替換為實際的變數名，以便在除錯程式碼時列印其值。

示例

在下面的示例中，我們使用了 @debug 指令來除錯 SASS 程式碼。我們定義了 height 和 border 變數並存儲了相應的值。

之後，我們使用了 @debug 指令來列印 height 和 border 變數的值，使用者可以在輸出中觀察到這些值。

$height: 45rem;
$border: 2px, solid, blue;
div {
   @debug $height;
   @debug $border;
}

輸出

執行後，它將產生以下輸出：

=> changed: C:\Data E\web devlopment
odedemo\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 devlopment
odedemo\css\style.css

使用者學習瞭如何使用 @error 和 @debug 指令在編譯 SASS 程式碼時捕獲錯誤。我們可以使用 @error 指令丟擲錯誤，並透過除錯程式碼使用 @debug 指令捕獲錯誤。