@error

Wenn Sie Mixins und Funktionen schreiben, die Argumente entgegennehmen, möchten Sie normalerweise sicherstellen, dass diese Argumente die Typen und Formate haben, die Ihre API erwartet. Wenn dies nicht der Fall ist, muss der Benutzer benachrichtigt werden und Ihr Mixin/Funktion muss aufhören zu laufen.

Sass macht dies einfach mit der Regel @error, die als @error <expression> geschrieben wird. Sie gibt den Wert des Ausdrucks (normalerweise eine Zeichenkette) zusammen mit einer Stack-Trace aus, die angibt, wie das aktuelle Mixin oder die Funktion aufgerufen wurde. Sobald der Fehler ausgegeben wurde, stoppt Sass die Kompilierung des Stylesheets und teilt dem System, das es ausführt, mit, dass ein Fehler aufgetreten ist.

Spielplatz

SCSS-Syntax

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

Sass-Syntax

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

Das genaue Format des Fehlers und der Stack-Trace variiert von Implementierung zu Implementierung und kann auch von Ihrem Build-System abhängen. So sieht es in Dart Sass aus, wenn es von der Kommando Zeile ausgeführt wird.

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