mirror of
https://github.com/danog/sass-site.git
synced 2024-12-14 18:37:35 +01:00
42 lines
1.3 KiB
Plaintext
42 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
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
{% 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 %}
|
|||
|
|
|
|||
|
|
{% endmarkdown %}
|