mirror of
https://github.com/danog/sass-site.git
synced 2024-12-13 18:07:35 +01:00
44 lines
1.3 KiB
Plaintext
44 lines
1.3 KiB
Plaintext
---
|
||
title: "@debug"
|
||
introduction: >
|
||
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 %}
|
||
|
||
{% markdown %}
|
||
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
|
||
```
|
||
{% endmarkdown %}
|
||
|
||
{% 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][].
|
||
|
||
[`meta.inspect()` function]: /documentation/modules/meta#inspect
|
||
{% endfunFact %}
|