@debug, @warn и @error

Код Sass выполняется на вашем компьютере, а не в браузере, поэтому консоли, куда можно заглянуть, нет. Вместо неё у Sass есть три правила, которые выводят сообщения в терминал, где работает компилятор: @debug показывает значение, @warn предупреждает, а @error останавливает сборку.

@debug — посмотреть значение

@debug выводит любое выражение вместе с именем файла и номером строки. Это помогает, когда вычисление даёт неожиданный результат:

// styles/main.scss
@use "sass:math";
 
$base: 16px;
$size: math.div(24px, $base) * 1rem;
 
@debug $size;

При запуске npx sass styles/main.scss css/main.css терминал покажет:

styles/main.scss:7 DEBUG: 1.5rem

В CSS @debug не попадает. Удалите его, когда проблема найдена.

@warn — предупредить и продолжить

@warn выводит предупреждение со стеком вызовов — какой миксин вызван из какой строки, — и компиляция продолжается. Используйте его для аргументов, которые работают, но скорее всего ошибочны:

// styles/abstracts/_mixins.scss
@mixin columns($count) {
  @if $count > 6 {
    @warn "#{$count} колонок трудно читать на маленьких экранах.";
  }
  grid-template-columns: repeat($count, 1fr);
}

// styles/main.scss
@use "abstracts/mixins";
 
.gallery {
  @include mixins.columns(8);
}

CSS создаётся, а терминал показывает:

WARNING: 8 колонок трудно читать на маленьких экранах.
    styles/abstracts/_mixins.scss 4:5  columns()
    styles/main.scss 5:3               root stylesheet

@error — остановить сборку

@error останавливает компиляцию и показывает сообщение; стили не собираются. Это правильная реакция на значение, с которым работа невозможна, например на неизвестный ключ карты:

// styles/abstracts/_functions.scss
@use "sass:map";
 
$colors: ("primary": #2563eb, "danger": #dc2626);
 
@function color($name) {
  @if not map.has-key($colors, $name) {
    @error "Неизвестный цвет '#{$name}'. Доступны: #{map.keys($colors)}.";
  }
  @return map.get($colors, $name);
}

// styles/main.scss
@use "abstracts/functions";
 
.alert {
  color: functions.color("warning");
}

Терминал показывает сообщение и место вызова:

Error: "Неизвестный цвет 'warning'. Доступны: primary, danger."
  ╷
5 │   color: functions.color("warning");
  │          ^^^^^^^^^^^^^^^^^^^^^^^^^^
  ╵
  styles/main.scss 5:10  root stylesheet

Без проверки опечатка тихо дала бы пустое значение. С ней сборка сразу падает и сообщает, какие значения доступны.

Что выбрать

В проекте на Vite те же сообщения появляются в терминале, где запущен npm run dev.

Частая ошибка

Не оставляйте строки @debug в коде. Каждая выводит строку при каждой компиляции, и в режиме слежения терминал заполняется шумом, за которым не видно настоящих предупреждений. Перед коммитом поищите @debug по проекту.