哪個指令用來偵測 SASS 中的錯誤？

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

在本教學中，我們將學習使用 @error 和 @debug 指令分別拋出錯誤或偵錯程式碼。

@error指令在SASS中

錯誤指令表示為'@error'，我們可以在需要拋出錯誤的時候使用它。例如，如果某個條件不滿足，我們需要拋出錯誤。

文法

使用者可以依照以下語法使用‘@error’指令來偵測SASS中的錯誤。

@error "error message";

在上述語法中，錯誤訊息被一個真正的錯誤所取代，我們需要將其顯示在輸出中。

Example

的中文翻譯為：

範例

在下面的範例中，我們在 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 -----------------------------------------------^"
}

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程式碼。透過偵錯程式碼，開發人員可以知道程式碼中的確切錯誤位置。例如，我們可以透過偵錯程式碼列印變數的值，並且可以手動捕捉錯誤。

文法

使用者可以依照下列語法來使用 SASS 的「@debug」指令。

@debug $var-name;

在上面的語法中，'var-name'被實際的變數名稱替換以列印其值，用於偵錯程式碼。

Example

的中文翻譯為：

範例

在下面的範例中，我們使用@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中文網其他相關文章！