Validierung der Eingaben in Sass -Mixins und Funktionen

Kernpunkte

• Eingänge in SASS -Mixin und Funktionen überprüfen, ist unerlässlich, um sicherzustellen, dass der eingehende Code korrekter Datentyp und Format ist, um Fehler und Fehler zu verhindern und den Code einfacher zu debugieren und zu warten.
• SASS bietet einige integrierte Funktionen für die Eingabevalidierung, wie type-of(), unit() und unitless(). Diese Funktionen können verwendet werden, um den Typ und die Einheit der Eingabedaten zu überprüfen, und ein Fehler wird geworfen, wenn der Eingang die erwarteten Kriterien nicht erfüllt.
• benutzerdefinierte Validierungsfunktionen können in SASS für komplexere Validierungsüberprüfungen erstellt werden. Dies beinhaltet die Definition einer neuen Funktion unter Verwendung der @function -Richtlinie und der Rückgabe eines Werts basierend auf der Überprüfungsprüfung unter Verwendung der @return -Richtlinie.
• Wenn die Eingangsüberprüfung in SASS -Mixin oder Funktion fehlschlägt, wird ein Fehler geworfen und die Zusammenstellung des SASS -Codes gestoppt. Die @error -Richtlinie kann verwendet werden, um eine benutzerdefinierte Fehlermeldung zu veröffentlichen und detaillierte Informationen über die Art des Fehlers und die Behebung des Fehlers zu liefern.

Beim Schreiben von Sass und die Verwendung von anderen machen sie wahrscheinlich einen Fehler, während Sie Ihren Code verwenden. Ehrlich gesagt, wenn ich Sass schreibe und es ein paar Tage (oder sogar Stunden später) verwende, mache ich Fehler in meinem eigenen Code. Sie könnten auch. Glücklicherweise hat Sass viele Funktionen, die uns helfen können, die Input -Entwickler, die wir geschrieben haben, zu überprüfen.

Diese Technologien sind besonders nützlich für Teams, die SASS -Mixin teilen oder ein Starter -Kit oder einen Satz Mixin und Funktionen unterhalten. Entwickler haben zwei Optionen, wenn Sie gemeinsam genutzte SASS -Bibliotheken verwenden: Sie können sich durch E -Mail, Chat, Ping oder auf andere Weise mit benutzerdefinierten Mixin -Hilfe unterbrechen oder detaillierte Dokumentationen verwenden, die die Codeüberprüfung enthält, um sich gegenseitig zu helfen, sie leicht auszuschließen. (Für diesen Punkt ist es nicht nur ein Problem mit SASS: Jeder gemeinsam genutzte Code muss über Interrupts oder Dokumente kommunizieren.) Lassen Sie uns nun einige der nützlichsten Methoden der SASS -Überprüfung lernen.

Überprüfen Sie einen einzelnen Wert

Mischen und Funktionen nehmen Parameter ein. Wenn Sie den Code bei der Arbeit an andere Entwickler weitergeben oder Open -Source -Bibliotheken veröffentlichen, müssen Sie sicherstellen, dass die Parameter mit Ihrer Absicht übereinstimmen. Diese Funktionen sind nützlich, um Variablen in Parametern zu überprüfen.

Stellen Sie sicher, dass die Variable vorhanden ist: variable-exists()

Wenn Ihre Funktion oder Ihr Mixin von einer von Entwickler definierten Variablen abhängt, verwenden Sie die entsprechende variable-exists() -Funktion, um sicherzustellen, dass die Variable vorhanden ist. Diese Funktion gibt wahr oder falsch zurück, basierend darauf, ob die Variable erstellt und definiert wurde.

<code class="language-sass">@mixin create-font-size() {
  @if variable-exists(base-font) {
    font-size: $base-font;
  } @else {
    @error "请定义变量 `$base-font`。";
  }
  @if variable-exists(line-height) {
    line-height: $line-height;
  } @else {
    @error "请定义变量 `$line-height`。";
  }
}

// 开发者的代码
$base-font: 18px;
$line-height: 1.5;
.element {
  @include create-font-size;
}</code>

Eine bessere Option, als sich auf Entwickler zu verlassen, um globale Variablen korrekt festzulegen

<code class="language-sass">// 你的插件：
$base-font: 18px !default;
$line-height: 1.5 !default;

@mixin create-font-size() {
  //等等...
}

// 开发者的代码：
$base-font: 16px;
p {
  @include create-font-size();
}</code>

Art des Scheckwerts:

type-of()

Wenn Sie die von einer Variablen dargestellte Wertstype kennen müssen, verwenden Sie bitte

. Diese Funktion gibt einen der folgenden Zeichenfolgen zurück: type-of()

• String
• Farbe
• Nummer
• bool
• null
• list
• map

Dies ist nützlich, um bestimmte Arten von Eingängen zu überprüfen. Sie können sicherstellen, dass der Entwickler nur die Werte an das Mixin übergibt, der die Größe erzeugt:

<code class="language-sass">@mixin create-font-size() {
  @if variable-exists(base-font) {
    font-size: $base-font;
  } @else {
    @error "请定义变量 `$base-font`。";
  }
  @if variable-exists(line-height) {
    line-height: $line-height;
  } @else {
    @error "请定义变量 `$line-height`。";
  }
}

// 开发者的代码
$base-font: 18px;
$line-height: 1.5;
.element {
  @include create-font-size;
}</code>

Sie können auch type-of() verwenden, um sicherzustellen, dass das Farbmix nur Farben verarbeitet:

<code class="language-sass">// 你的插件：
$base-font: 18px !default;
$line-height: 1.5 !default;

@mixin create-font-size() {
  //等等...
}

// 开发者的代码：
$base-font: 16px;
p {
  @include create-font-size();
}</code>

Wenn Sie Entwickler benötigen, um Konfigurationseinstellungen für Themen zu erstellen, können Sie sicherstellen, dass sie gültige Karten haben:

<code class="language-sass">@mixin size($height, $width: $height) {
  @if type-of($height) == number {
    height: $height;
  } @else {
    @warn "确保 `$height` 是一个数字。";
  }
  @if type-of($width) == number {
    width: $width;
  } @else {
    @warn "确保 `$width` 是一个数字。";
  }
}</code>

Einheiten zur Bestätigung der Zahlen: unit()

Manchmal erfordern mathematische Operationen in Funktionen oder Mixin bestimmte Einheiten in ihren Parametern. Sie können unit() verwenden, um zu bestätigen, dass der Wert die richtige Einheit hat. Zum Beispiel können Sie ein Mixin verwenden, um Pixel- und REM -Abmessungen zu erstellen. ( Beachten Sie, dass Sie das Paket besser mit einer Aufgabe ausführen sollten, aber wenn Sie es in SASS behalten müssen, lesen Sie weiter. )

<code class="language-sass">@function color-fade($color) {
  @if type-of($color) == 'color' {
    @return rgba($color, .8);
  } @else {
    @warn "确保你将有效的颜色传递给 color-fade() 函数。";
  }
}</code>

Liste und Karte

überprüfen

Wir haben gesehen, wie man type-of() verwendet, um sicherzustellen, dass Variablen Listen oder Karten enthalten. Wir können auch zwei wichtige Dinge testen: ob sich die Werte in der Liste befinden und ob sich die Schlüssel in der Karte befinden.

Werte in der Liste finden: index()

Die Funktion

index() zeigt Ihnen, ob der Wert in der Liste gefunden wird. Technisch wird die Position des Wertes in der Liste (einer Zahl) oder Null zurückgegeben. Es ist keine echte boolesche Funktion, aber für unseren Zweck hier sind wahre und falsche Werte ausreichend.

index() Die Funktion nimmt zwei Parameter an: die Liste und den Wert, den Sie in der Liste finden möchten. Diese Funktion ist nützlich, um Messungen bestimmter Werte in einem Mixin zu testen. Wenn wir ein Mixin haben, das Polster- oder Randberechnungen unter Verwendung von CSS -oberen, rechts, unten oder linker Kurzform ausgibt, möchten wir nicht versuchen, Werte wie Anfang, Erben oder Auto zu berechnen.

<code class="language-sass">@mixin generate-theme($settings) {
  @if type-of($settings) == 'map' {
    // 此处输出
  } @else {
    @warn "确保 `$settings` 是一个 Sass 映射。";
  }
}</code>

Stellen Sie sicher, dass die Karte Tasten enthält: map-has-key()

Wenn Sie nach einem bestimmten Schlüssel in der Karte überprüfen, können Sie die Funktion map-has-key() verwenden, um sicherzustellen, dass der Schlüssel in der Karte, auf die Sie überprüft werden, vorhanden sind. Dies ist sehr nützlich, wenn Sie $breakpoints Mapping und Media Query Mixin verwenden:

<code class="language-sass">$rem-size: 16px !default;

@mixin px-rem($property, $value) {
  @if unit($value) == 'px' {
    #{$property}: $value;
    #{$property}: $value / $rem-size * 1rem;
  } @elseif unit($value) == 'rem' {
    #{$property}: $value * $rem-size / 1rem;
    #{$property}: $value;
  } @else {
    @warn "确保 `$value` 以 px 或 rem 为单位。";
  }
}</code>

Mixin und Funktionen

verifizieren

Manchmal schreiben Sie ein Mixin oder eine Funktion, die von einem vorhandenen Mixin oder einer anderen Sass -Bibliothek abhängt. Lassen Sie uns das bp() Mixin aus dem vorherigen Beispiel aktualisieren, um sich auf die Breakpoint -Sass -Bibliothek zu verlassen. Wir können es so erweitern:

<code class="language-sass">$rem-size: 16px !default;

@mixin margin-rem($values...) {
  $output: ();
  @each $value in $values {
    @if index(auto inherit initial 0, $value) {
      $output: append($output, $value);
    } @else {
      $output: append($output, $value / $rem-size * 1rem);
    }
  }
  margin: #{$output};
}</code>

Jetzt verwendet unser bp() mixin (kürzer und verwendet zugeordnete Werte) breakpoint() Mixin, wenn es existiert. Wenn nicht, fällt es auf unseren eigenen Medienanfragemischincode zurück.

Es gibt eine Matching -Funktion namens function-exists(). Sie können es verwenden, um zu testen, ob eine bestimmte Funktion vorliegt. Wenn Sie mathematische Operationen haben, die auf nicht standardmäßigen Funktionen beruhen, können Sie sicherstellen, dass Bibliotheken die Funktion enthalten. Compass hat eine pow() -Funktion für exponentielle Mathematik hinzugefügt. Wenn Sie ein Schriftgrößenverhältnis erstellen, das die Funktion erfordert, testen Sie es:

<code class="language-sass">@mixin create-font-size() {
  @if variable-exists(base-font) {
    font-size: $base-font;
  } @else {
    @error "请定义变量 `$base-font`。";
  }
  @if variable-exists(line-height) {
    line-height: $line-height;
  } @else {
    @error "请定义变量 `$line-height`。";
  }
}

// 开发者的代码
$base-font: 18px;
$line-height: 1.5;
.element {
  @include create-font-size;
}</code>

Fragen berichten: @warn und @error

Wie Sie vielleicht im obigen Code -Beispiel bemerkt haben, habe ich darauf geachtet, den Entwicklern ein gutes Feedback zu geben, wenn unsere Validierung einige falsche Eingaben erfasst. Meistens habe ich

verwendet. Diese Anweisung sendet Nachrichten an die Konsole des Entwicklers, ermöglicht dem Compiler jedoch, den Lauf zu vervollständigen. @warn

Manchmal, wenn ich den Compiler vollständig stoppen muss (keine spezifische Eingabe oder Funktion, wird viel Ausgabe unterbrochen), benutze ich

, um die Nachricht an die Konsole zu senden und den Compiler zu stoppen. @error

Weitere Informationen zu dem Unterschied zwischen

und @warn erhalten Sie möglicherweise meinen vorherigen Artikel zu diesem Thema oder den entsprechenden Abschnitt in der SASS -Referenz für SitePoint. @error

Schlussfolgerung

Niemand ist perfekt - diejenigen, die unseren Code verwenden, sind nicht und nicht einmal wir, nachdem wir unseren Code für ein paar Stunden geschrieben haben! Aus diesem Grund ist es sehr wichtig, uns und anderen zu helfen, indem sie Eingaben in Mixin und Funktionen validieren. Diese Techniken helfen Ihnen nicht nur, Ihren eigenen Code effizienter zu verwenden, sondern erleichtern den Teams auch Sass -Bibliotheken.

Wie verhindern Sie Fehler in Sass? Bitte lassen Sie es uns in den Kommentaren wissen!

FAQs (FAQ) zur Überprüfung der Eingänge in SASS -Mixin und Funktionen

Was ist der Zweck der Überprüfung der Eingaben in Sass -Mixin und Funktionen?

Eingabe in SASS -Mixin und Funktionen überprüfen, ist für die Aufrechterhaltung der Integrität und Funktionalität des Codes unerlässlich. Es hilft sicherzustellen, dass die an Mixin und Funktion übergebenen Datentypen korrekt sind und dem erwarteten Format entsprechen. Dies verhindert Fehler und Fehler im Code, was ihn leistungsfähiger und zuverlässiger macht. Außerdem erleichtert Ihr Code zu debuggen und zu warten, da Sie alle Probleme in den Eingabedaten schnell identifizieren und korrigieren können.

Wie überprüfe ich die Eingabe in Sass Mixin und Funktion?

SASS bietet einige integrierte Funktionen, mit denen Sie die Eingänge in Mixin und Funktionen überprüfen können. Dazu gehören

, type-of() und unit() usw. Sie können diese Funktionen verwenden, um den Typ und die Einheit der Eingabedaten zu überprüfen, und ein Fehler wird geworfen, wenn der Eingang die erwarteten Kriterien nicht erfüllt. Sie können beispielsweise die Funktion unitless() verwenden, um zu überprüfen, ob die Eingabe eine Zahl ist, und wenn nicht, wird ein Fehler geworfen. type-of()

Kann ich eine benutzerdefinierte Validierungsfunktion in SASS erstellen?

Ja, Sie können benutzerdefinierte Validierungsfunktionen in SASS erstellen. Dies ist sehr nützlich, wenn Sie komplexere Validierungsüberprüfungen durchführen müssen, die nicht mit integrierten Funktionen implementiert werden können. Um eine benutzerdefinierte Validierungsfunktion zu erstellen, definieren Sie einfach eine neue Funktion unter Verwendung der @function -Direktive und verwenden Sie dann die @return -Gealisierung, um einen Wert basierend auf der Validierungsprüfung zurückzugeben.

Was passiert, wenn die Eingabevalidierung in SASS -Mixin oder Funktion fehlschlägt?

Wenn die Eingabevalidierung in SASS -Mixin oder Funktion fehlschlägt, wird ein Fehler geworfen und die Zusammenstellung des Sass -Codes stoppt. Dies kann Ihnen helfen, Probleme in den Eingabedaten schnell zu identifizieren und zu beheben und Fehler und Fehler in der endgültigen CSS -Ausgabe zu verhindern.

Wie gehe ich mit Fehlern in Sass Mixin und Funktionen um?

SASS stellt die @error -Richtlinie bereit, mit der Sie eine benutzerdefinierte Fehlermeldung abgeben können, wenn die Eingabeüberprüfung fehlschlägt. Dies ist insbesondere für das Debuggen nützlich, da Sie detaillierte Informationen über die Art des Fehlers und die Behebung detaillierter Informationen bereitstellen können.

Kann ich die Sass -Introspection -Funktion zur Eingabevalidierung verwenden?

Ja, die Sass -Introspection -Funktion kann zur Eingabevalidierung verwendet werden. Mit diesen Funktionen können Sie die Art, Einheit und andere Eigenschaften der Eingabedaten überprüfen und können in Verbindung mit der @error -Richtlinie verwendet werden, die eine benutzerdefinierte Fehlermeldung abgeben kann, wenn die Eingabe nicht die erwarteten Kriterien erfüllt.

Was sind einige gemeinsame Anwendungsfälle für die Validierung der Eingaben in SASS -Mixin und Funktionen?

Stellen Sie sicher, dass die Eingabe in einer Vielzahl von Szenarien in Sass -Mixin und Funktionen verwendet werden kann. Sie möchten beispielsweise sicherstellen, dass der an das Mixin übergebene Farbwert eine gültige Farbe hat oder dass die an die Funktion übergebene Nummer die richtige Einheit hat. Die Eingabeteilung kann auch verwendet werden, um bestimmte Einschränkungen oder Regeln im Code durchzusetzen, z. B. um sicherzustellen, dass immer ein bestimmter Parameter bereitgestellt wird oder dass ein Wert innerhalb eines bestimmten Bereichs liegt.

Kann ich testen, ob Mixin in Sass existiert?

Ja, Sie können die mixin-exists() -Funktion verwenden, um zu testen, ob das Mixin in SASS vorhanden ist. Wenn Mixin existiert, gibt diese Funktion wahr, sonst falsch. Dies ist sehr nützlich, um Fehler in Ihrem Code zu vermeiden, da Sie überprüfen können, ob das Mixin vorhanden ist, bevor Sie versuchen, ihn einzuschließen.

Wie verwende ich die unit() -Funktion für die Eingabevalidierung in SASS?

Die

-Funktion in unit() in SASS gibt die Einheit einer Zahl zurück. Sie können diese Funktion in der Eingabevalidierung verwenden, um zu überprüfen, ob die Nummer die richtige Einheit hat. Sie möchten beispielsweise sicherstellen, dass der an das Mixin übergebene Längenwert in Pixeln oder der an die Funktion übergebene Zeitwert in Sekunden liegt.

Was sind einige Best Practices für die Validierung der Eingaben in Sass Mixin und Funktionen?

Einige Best Practices für die Überprüfung von Eingaben in SASS-Mixin und Funktionen umfassen die Eingabedaten; Fehlermeldung; @error

Das obige ist der detaillierte Inhalt vonValidierung der Eingaben in Sass -Mixins und Funktionen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!