mirror of
https://github.com/danog/sass-site.git
synced 2024-12-16 03:17:15 +01:00
41 lines
1.3 KiB
Plaintext
41 lines
1.3 KiB
Plaintext
---
|
||
title: "@debug"
|
||
introduction: >
|
||
Sometimes it’s useful to see the value of a [variable](../variables) or
|
||
[expression](../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.
|
||
---
|
||
|
||
<% 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 [`meta.inspect()` function][].
|
||
|
||
[`meta.inspect()` function]: ../modules/meta#inspect
|
||
<% end %>
|