Spec-Zone.ru › Sass

@error

При написании миксинов и функций, принимающих аргументы, обычно нужно убедиться, что типы и форматы этих аргументов соответствуют ожиданиям вашего API. Если это не так, необходимо уведомить пользователя, а выполнение миксина или функции должно быть остановлено.

Sass упрощает эту задачу с помощью правила @error, которое записывается как @error <expression>. Оно выводит значение выражения (обычно строки) вместе с трассировкой стека, показывающей, как был вызван текущий миксин или функция. После вывода ошибки Sass прекращает компиляцию таблицы стилей и сообщает системе, которая его запускает, о возникшей ошибке.

@mixin reflexive-position($property, $value) {
  @if $property != left and $property != right {
    @error "Property #{$property} must be either left or right.";
  }

  $left-value: if(sass($property == right): initial; else: $value);
  $right-value: if(sass($property == right): $value; else: initial);

  left: $left-value;
  right: $right-value;
  [dir=rtl] & {
    left: $right-value;
    right: $left-value;
  }
}

.sidebar {
  @include reflexive-position(top, 12px);
  //       ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  // Error: Property top must be either left or right.
}
// SASS
@mixin reflexive-position($property, $value)
  @if $property != left and $property != right
    @error "Property #{$property} must be either left or right."


  $left-value: if(sass($property == right): initial; else: $value)
  $right-value: if(sass($property == right): $value; else: initial)

  left: $left-value
  right: $right-value
  [dir=rtl] &
    left: $right-value
    right: $left-value



.sidebar
  @include reflexive-position(top, 12px)
  //       ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  // Error: Property top must be either left or right.

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

Error: "Property top must be either left or right."
  ╷
3 │     @error "Property #{$property} must be either left or right.";
  │     ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  ╵
  example.scss 3:5   reflexive-position()
  example.scss 19:3  root stylesheet

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

Spec-Zone.ru

Настройки Оффлайн Что нового Помощь О нас
Spec-Zone .ru
спецификации, руководства, описания, API