@debug

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

Playground

SCSS Syntax

@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});
}
Playground

Sass Syntax

@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 中的样子：

¥The exact format of the debug message varies from implementation to implementation. This is what it looks like in Dart Sass:

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

💡 Fun fact:

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

¥You can pass any value to @debug, not just a string! It prints the same representation of that value as the meta.inspect() function.