mirror of
https://github.com/danog/sass-site.git
synced 2024-12-14 02:17:36 +01:00
43 lines
1.2 KiB
Plaintext
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 %>
|