@debug

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

SCSS Syntax

@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().