哪个指令用于检测 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 指令捕获错误。