SASS 中的 @error 和 @debug 指令有什么用？

在本文中，我们将看到在 SASS 中使用@error和@debug指令。 Sass 是 CSS 的扩展，代表 Syntactically Awesome Style Sheets。它帮助我们创建变量、嵌套规则等内容，以便我们可以在多个元素中重用代码。

@error 指令

Sass 包含三个用于向开发人员提供反馈的指令。其中之一是@error指令。当您想要显示错误时使用它。它完全停止 Sass 编译器并将 SassScript 表达式值显示为致命错误。我们可以使用该指令向开发人员发送消息，以便他们可以立即停止并纠正错误。它可以帮助开发人员了解他们在代码中的错误，因为 Sass 还提供了错误发生的行号以及 @error 输出。

示例：下面给出的是名为 Error.scss 的样式表文件，它以扩展名 .scss 保存，类似于 CSS 文件。

$color:  green;
  @error "Invalid color: '#{$color}'.";  

以下命令将开始监视 SASS 文件中的更改并自动生成相应的 CSS 文件。

sass --watch Error.scss:Error.css

输出：

@debug 指令

@debug指令显示 SassScript 表达式值。它打印表达式的值、文件名以及行号。当开发人员希望在开发样式表时查看变量或表达式的值时，可以使用此指令。因此，@debug 将其包含的任何 Sass 表达式（变量、数学等）的值打印到开发人员的控制台。非常适合个人调试工作。

示例：下面给出的是名为 debug.scss 的样式表文件，它以扩展名 .scss 保存，与 CSS 文件类似。

$color-green: #00FF00;
$font-sizes: 25px + 20px;;

.container {
  @debug $color-green;
  @debug $font-sizes;
  @debug "GeeksforGeeks";
}

以下命令将开始监视 SASS 文件中的更改并自动生成相应的 CSS 文件。

sass --watch debug.scss:debug.css

输出：