@error

引数を受け取るミックスインと関数を作成する際には、通常、これらの引数がAPIで期待される型と形式を持っていることを確認する必要があります。そうでない場合は、ユーザーに通知する必要があり、ミックスイン/関数の運用を停止する必要があります。

Sassでは、@errorルールの使用によって、この作業が容易になります。このルールは@error <expression>と記述します。これは式（通常は文字列）の値と、現在のミックスインまたは関数が呼び出された方法を示すスタックトレースを出力します。エラーが出力されると、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