Sass 调试利器:@error
、@warn
和 @debug
指令
Sass 提供了三个指令来帮助开发者调试代码:@error
、@warn
和 @debug
。它们用于在代码逻辑的任何需要帮助的点上调试任何值并找出代码的行为。
@error
指令: 该指令会完全停止 Sass 编译器,并将文本字符串作为致命错误发送到编译器的输出。它非常适合验证 mixin 或函数中的参数,并让开发者知道他们做错了什么,或者输入了完全不兼容的值。
@warn
指令: 该指令比 @error
危害性小。它会将消息发送给编译器供开发者阅读,但允许编译器完成其工作并写入所有 CSS。它适用于弃用通知,或建议开发者遵循某些最佳实践。
@debug
指令: 这是三个反馈指令中侵入性最小的一个。它会将包含的任何 Sass 表达式(变量、数学表达式等)的值打印到控制台供开发者查看。它非常适合个人调试工作。
在其他编程语言中,类似的反馈机制非常常见,例如 JavaScript 中的 console.log()
或 alert()
,PHP 中的 var_dump()
或 print_r()
,Ruby 中的 debug
或 inspect
等。这些函数都允许您调试任何值,并在逻辑的任何需要帮助的点上找出代码的行为。
基本语法和用法
这三个指令遵循相同的语法:
<code class="language-sass">@directive "要输出的文本字符串";</code>
实际上,这三个指令可以接受任何类型的值,而不一定是字符串。这意味着您可以警告、抛出或调试映射、列表、数字、字符串——基本上任何您想要的东西。但是,由于我们经常使用这些指令来提供关于问题的上下文,因此通常会传递一个描述情况的字符串。
如果需要在字符串中插入变量的值,可以使用标准的 Sass 插值语法 #{$variable}
,变量的值将被打印在字符串中:
<code class="language-sass">@error "抱歉,`#{$variable}` 不是 $variable 的有效值。";</code>
注意:插值周围的反引号(`)不是必需的。您可能希望包含它们,因为它们为开发人员提供了变量内容的明显起点/终点。
如果开发者在使用您的 Sass 代码时犯了错误,这些指令会将指定的消息发送到编译器,编译器会将该消息显示给开发者。例如,GUI 应用程序(如 CodeKit)将显示带有错误的系统通知。某些 Grunt 和 Gulp 通知包也可以做到这一点。
如果开发者使用命令行(Sass、Compass、Grunt 或 Gulp)进行编译,则消息可能会出现在他们的控制台中(终端、iTerm2、Putty 等)。如果您使用 Sassmeister 或 Codepen 在线编写 Sass,您只会获得有限的反馈,但您可能会在编辑器中获得内联通知或输出窗口中的文本。
@error
指令:立即停止编译
Sass 的 @error
指令会完全停止 Sass 编译器,并将文本字符串作为致命错误发送到编译器的输出。当您需要发送立即停止开发者并强制他们立即纠正错误的消息时,请使用此指令。这非常适合让开发者知道他们做错了什么,或者输入了完全不兼容的值。Sass 将包含任何致命错误的行号,包括 @error
输出。@error
指令非常适合验证 mixin 或函数中的参数。
注意:如果您的编译器早于 Sass 3.4 或 LibSass 3.1,则 @error
不可使用。您可以使用此 log()
函数在旧版 Sass 版本中模拟 @error
。
@warn
指令:发出警告,但不停止编译
@warn
指令比 @error
危害性小得多。它会将消息发送给编译器供开发者阅读,但允许编译器完成其工作并写入所有 CSS。@error
适用于纠正完全破坏函数或 mixin 的错误,而 @warn
更适合弃用通知,或建议开发者遵循某些最佳实践。
注意:使用 --quiet
标志编译的 Sass 开发者将看不到 @warn
输出。如果开发者绝对需要看到您的 Sass 发送的反馈,请依赖 @error
。@warn
很少被关闭,但这是可能的。
@debug
指令:调试输出到控制台
Sass 的 @debug
指令是三个反馈指令中侵入性最小的一个。它会将包含的任何 Sass 表达式(变量、数学表达式等)的值打印到控制台供开发者查看。它在开源或团队库中并不完全有用。相反,@debug
非常适合个人调试工作。如果您处于复杂的数学运算中,并且需要知道某个变量当前包含的内容,请使用 @debug
来查找。
总结
没有反馈的编程将非常糟糕。幸运的是,Sass 有多个指令可以将反馈发送到编译器,以帮助开发者避免错误、维护标准和排除高级逻辑故障。您可以使用 @error
、@warn
和 @debug
为自己和任何使用您代码的其他人提供节省时间的反馈。
(FAQs 部分略去,因为篇幅过长,且与伪原创目标不符。 FAQs 部分内容可以根据需要重新编写,并整合到正文中,以更自然的方式呈现。)
以上是使用SASS的@error,@warn和@debug指令的详细内容。更多信息请关注PHP中文网其他相关文章!