SASS 是一种 CSS 预处理器，它可以让我们写出更加简洁、易于维护的样式代码。在 SASS 中，我们可以使用变量来存储颜色、尺寸等常量，但是有时候我们需要查看这些变量的值，这时候 @debug 语句就派上用场了。
@debug 语句是什么？
@debug 是 SASS 中的一个内置指令，用于在控制台输出调试信息。它的语法如下：
@debug $variable;
其中，$variable 是要输出的变量名或表达式。当 SASS 编译器遇到 @debug 语句时，它会在控制台输出变量的值。
如何使用 @debug 语句？
在 SASS 中使用 @debug 语句非常简单，只需要在需要输出变量值的地方添加 @debug 语句即可。例如：
$primary-color: #007bff; @debug $primary-color;
运行 SASS 编译器后，控制台会输出：
DEBUG: #007bff
这样我们就可以方便地查看变量的值了。
@debug 语句的作用
@debug 语句的作用不仅仅是输出变量的值，它还可以帮助我们调试样式代码。例如，我们在编写 SASS 样式时，可能会遇到以下问题：
- 变量没有被正确赋值；
- 混合器参数传递错误；
- 条件语句判断错误。
这些问题都会导致样式效果不符合预期，而 @debug 语句可以帮助我们找到问题所在。例如：
-- -------------------- ---- -------
------ ---------------------- -
--- --- ----------------- -
------ ------- ---------- ------ -- - -------- ---------
-
-------------- --------
-
---- -
-------- --------------------
-在这段代码中，我们定义了一个名为 border-radius 的混合器，用于设置元素的圆角半径。在混合器中，我们使用 @if 语句判断传入的参数是否为无单位数值。如果不是，就使用 @debug 语句输出错误信息。
在调用混合器的时候，我们传入了带有单位的数值，这时候 @debug 语句就会输出错误信息，帮助我们找到问题所在。
总结
@debug 语句是 SASS 中一个非常实用的调试工具，它可以帮助我们查看变量的值，找到样式代码中的错误。在编写 SASS 样式时，我们应该充分利用 @debug 语句，提高开发效率，减少调试时间。
示例代码
-- -------------------- ---- -------
--------------- --------
------ ---------------
------ ---------------------- -
--- --- ----------------- -
------ ------- ---------- ------ -- - -------- ---------
-
-------------- --------
-
---- -
-------- --------------------
-来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6589274feb4cecbf2de5f57b