哪个指令用于检测 SASS 中的错误？

百变鹏仔 4周前 (09-20) #CSS

文章标签指令

在 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.scssC:/Data E/web devlopment/nodedemo/scss/style.scss:5 DEBUG: 45remC:/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 中的错误？

@error指令在SASS中

语法

Example

示例

输出

Example

示例

输出

@debug指令在SASS中的作用

语法

Example

示例

输出

css如何让导航栏变透明

css 怎么去除a标签的手形

css里怎样设置字体大小和字体颜色

css如何固定导航栏

css边框变圆角边框怎么写