sass-site/source/documentation/at-rules/debug.html.md.erb
2018-10-23 13:42:40 -07:00

43 lines
1.2 KiB
Plaintext

---
title: "@debug"
---
Sometimes it's useful to see the value of a [variable][] or [expression][] 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.
[variable]: ../variables
[expression]: ../syntax/structure#expressions
<% example(autogen_css: false) do %>
@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})
<% end %>
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 do %>
You can pass any value to `@debug`, not just a string! It prints the same
representation of that value as the [`inspect()` function][].
[`inspect()` function]: ../functions/meta#inspect
<% end %>