错误 @error

在编写带有参数的 [mixins] 和[functions]时,您通常希望确保这些参数具有类型和格式 您的 API 期望。 如果不是,则需要通知用户并且您的混入/函数需要停止运行。

Sass 使用 @error 规则使这变得容易,它被写为 @error <expression>。 它打印 expression 的值(通常是一个字符串)以及一个堆栈跟踪,指示当前 mixin 或函数是如何被调用的。 一旦错误被打印出来,Sass 就会停止编译样式表并告诉任何运行它的系统发生了错误。

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

  $left-value: if($property == right, initial, $value);
  $right-value: if($property == right, $value, 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.
}

The exact format of the error and stack trace varies from implementation to implementation, and can also depend on your build system. This is what it looks like in Dart Sass when run from the command line:

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