本教程展示了如何调试sass代码。
有时，我们想知道在CSS编译过程中某个变量的值。这可以通过sass内置的命令实现。
如何打印sass值到输出和控制台。
让我们看看多种方法来打印sass变量数据到控制台和输出。
- 使用sass内置的规则和指令
Sass提供了以下的规则
@debug:当调试信息被发射到控制台时，这个函数被调用。@warn:在sass发出警告时调用此功能@error：在发出一个致命的错误时打印到控制台。
语法
@debug message
@warn message
@error message
消息是一个字符串或一个使用变量的CSS表达式。它将消息打印到标准输出流。
$primary-font-color:#f90;
@debug 'primary font color'+$primary-font-color;
@warn 'primary font color'+$primary-font-color;
@error 'primary font color'+$primary-font-color;
它在sass的编译阶段将消息打印到控制台。
Line 1 DEBUG: #f90
Line 1 WARN: #f90
Line 1 ERROR: #f90
它将输出结果打印到html正文中的html元素。
#header::before{ content: "#{$primary-font-color}"}
这里使用表达式语法的变量来包裹内容值。它打印一个颜色字符串到DOM树中的#header元素，并打印给用户用于调试目的。
总结
学习了多种打印sass数据到控制台和输出的方法和例子。
