@debug

Иногда при разработке таблиц стилей полезно посмотреть значение переменной или выражения. Для этого предназначена директива @debug: она записывается @debug <expression> и выводит значение этого выражения вместе с именем файла и номером строки.

@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});
}
// SASS
@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})

Точный формат сообщения отладки может отличаться в разных реализациях. Вот как это выглядит в Dart Sass:

test.scss:3 Debug: divider offset: 132px

💡 Интересный факт:

Вы можете передать в @debug любое значение, а не только строку! Оно выведет такое же представление этого значения, как и функция meta.inspect().

© 2006–2025 the Sass team, and numerous contributors
Licensed under the MIT License.
https://sass-lang.com/documentation/at-rules/debug