@debug

有时,在开发样式表时查看变量表达式的值会很有用。这就是@debug规则的意义:它被写入@debug <expression>,并打印该表达式的值以及文件名和行号。

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

Sass语法

@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()函数相同的值表示。