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.

@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`。";
  }
}

// 開發(fā)者的代碼
$base-font: 18px;
$line-height: 1.5;
.element {
  @include create-font-size;
}

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

// 你的插件：
$base-font: 18px !default;
$line-height: 1.5 !default;

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

// 開發(fā)者的代碼：
$base-font: 16px;
p {
  @include create-font-size();
}

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:

@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`。";
  }
}

// 開發(fā)者的代碼
$base-font: 18px;
$line-height: 1.5;
.element {
  @include create-font-size;
}

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

// 你的插件：
$base-font: 18px !default;
$line-height: 1.5 !default;

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

// 開發(fā)者的代碼：
$base-font: 16px;
p {
  @include create-font-size();
}

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

@mixin size($height, $width: $height) {
  @if type-of($height) == number {
    height: $height;
  } @else {
    @warn "確保 `$height` 是一個數(shù)字。";
  }
  @if type-of($width) == number {
    width: $width;
  } @else {
    @warn "確保 `$width` 是一個數(shù)字。";
  }
}

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

@function color-fade($color) {
  @if type-of($color) == 'color' {
    @return rgba($color, .8);
  } @else {
    @warn "確保你將有效的顏色傳遞給 color-fade() 函數(shù)。";
  }
}

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.

@mixin generate-theme($settings) {
  @if type-of($settings) == 'map' {
    // 此處輸出
  } @else {
    @warn "確保 `$settings` 是一個 Sass 映射。";
  }
}

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:

$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 為單位。";
  }
}

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:

$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};
}

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:

@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`。";
  }
}

// 開發(fā)者的代碼
$base-font: 18px;
$line-height: 1.5;
.element {
  @include create-font-size;
}

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!