调试 @debug

有时在开发样式表时查看变量或表达式的值很有用。

有时在开发样式表时查看 variable 或 expression 的值很有用。这就是 @debug 规则的用途：它被写成 @debug <expression>，它打印该表达式的值，以及文件名和行号。

scss

Scss

scss

@mixin inset-divider-offset($offset, $padding) {
  $divider-offset: (2 * $padding) + $offset;
  @debug "divider offset: #{$divider-offset}";

  margin-left: $divider-offset;
  width: calc(100% - #{$divider-offset});
}

调试消息的确切格式因实施而异。这是 Dart Sass 中的样子：

test.scss:3 Debug: divider offset: 132px

💡 有趣的事实：

您可以将任何值传递给@debug，而不仅仅是一个字符串！它打印与 meta.inspect() 函数相同的值表示。