`@error`

當撰寫帶有參數的 mixin函式 時,您通常會希望確保這些參數的類型和格式符合您的 API 預期。如果不是,則需要通知使用者,並且您的 mixin/函式需要停止執行。

Sass 使用 `@error` 規則讓這件事變得簡單,其寫法為 `@error <expression>`。它會印出表達式的值(通常是字串),以及一個堆疊追蹤,指示目前的 mixin 或函式是如何被呼叫的。一旦印出錯誤,Sass 就會停止編譯樣式表,並告知正在執行它的系統發生了錯誤。

程式碼遊樂場

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.
}
程式碼遊樂場

Sass 語法

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

錯誤和堆疊追蹤的確切格式會因實作方式而異,也可能取決於您的建置系統。這是從命令列執行 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