sass-site/source/documentation/at-rules/debug.md

title	introduction
@debug	Sometimes it’s useful to see the value of a [variable](/documentation/variables) or [expression](/documentation/syntax/structure#expressions) while you’re developing your stylesheet. That’s what the `@debug` rule is for: it’s written `@debug <expression>`, and it prints the value of that expression, along with the filename and line number.

{% codeExample 'debug', false %} @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});

}

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

{% endcodeExample %}

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

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

{% endfunFact %}