Skip to main content

Sass: @debug Directive

@debug Directive

@debug rule is useful to see the value of a variable or expression while you’re developing your stylesheet.

It’s written @debug <expression>, and it prints the value of that expression, along with the filename and line number.


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

The exact format of the debug message varies from implementation to implementation.


You can pass any value to @debug, not just a string.

Table of Contents