Share
Bisher habe ich sieben Sass-Bibliotheken geschrieben. Bei den meisten handelt es sich lediglich um eine Obermenge von Funktionen, die in Ihren Projekten verwendet werden können, um Ihnen mehr Macht über den Code zu geben.
Zum Beispiel ist SassyLists eine Sammlung von Funktionen zum Manipulieren von Sass-Listen. Sie helfen Ihnen dabei, eine Liste umzukehren, ein Element an einem bestimmten Index einzufügen, eine Liste zwischen zwei Indizes aufzuteilen und so weiter.
SassyLists können als Compass-Erweiterung importiert werden, aber ich habe festgestellt, dass Entwickler manchmal nur eine bestimmte Funktion von SassyLists verwenden möchten, damit sie diese kopieren und in ihre Code-Basis einfügen können. Das Problem ist, dass sie nicht immer auf Abhängigkeiten achten (z. B. andere Funktionen)..
Ich beschloss, an einem Abhängigkeits-Checker zu arbeiten. Die Idee ist ziemlich einfach: Jede Funktion mit Abhängigkeiten wird zuerst durch die Abhängigkeitsprüfung laufen. Wenn letzterer feststellt, dass einige Funktionen fehlen, wird der Entwickler gewarnt, dass die Funktion nicht ordnungsgemäß ausgeführt werden kann.
Die Abhängigkeitsüberprüfung ist eine einfache Funktion, die eine unbegrenzte Anzahl von Argumenten (Namen der erforderlichen Funktionen) akzeptiert..
@Funktion fehlt Abhängigkeiten ($ Funktionen…) // Abhängigkeiten prüfen
Damit verwenden wir die function-exists () Die in Sass 3.3 eingeführte Funktion prüft, ob eine bestimmte Funktion im globalen Gültigkeitsbereich vorhanden ist.
Hinweis: Sass 3.3 bietet auch an mixin-exists (), Variable-exists () und global-variable-exists ().
@Funktion fehlt Abhängigkeiten ($ Funktionen…) @each $ -Funktion in $ Funktionen @wenn nicht Funktion-Existiert ($ Funktion) @return true; @falsch zurückgeben;
Wenn aus irgendeinem Grund keine Funktion im Gültigkeitsbereich vorhanden ist, dann fehlende Abhängigkeiten kehrt zurück wahr. Wenn alle Funktionen in Ordnung sind, gibt es keine fehlenden Abhängigkeitenfalsch.
Sie würden es also so verwenden:
// @erquires my-function // @erquires my-other-function @function dummy () @ist fehlende Abhängigkeiten (my-function, my-other-function) @warn "Hoppla! Einige Funktionen für 'Dummy fehlen '! "; @return null; // Kern der 'Dummy'-Funktion, // benötigt offensichtlich' my-function 'und' my-other-function ', um zu funktionieren.
Das ist ziemlich cool.
Es wäre noch besser, wenn wir uns identifizieren könnten welche Funktion fehlt, so dass der Entwickler weiß, was zu tun ist, um das Problem zu beheben. Außerdem ist es ärgerlich, die Warnung jedes Mal eingeben zu müssen fehlende Abhängigkeiten Funktion.
Die Idee unterscheidet sich nicht so sehr von dem, was wir bisher gemacht haben. Der Unterschied ist, dass wir jetzt den Namen der fehlenden Funktionen speichern und nicht direkt zurückgeben. Wenn dann Funktionen fehlen, werden wir eine Warnung an den Entwickler senden und schließlich einen Boolean-Wert zurückgeben, wie wir es zuvor getan haben.
@ function missing-dependencies ($ funktionen ...) $ missing-dependencies: (); @each $ -Funktion in $ -Funktionen @wird nicht funktionsfähig ($ Funktion) $ fehlende Abhängigkeiten: anhängen ($ fehlende-Abhängigkeiten, $ Funktion, Komma); @if length ($ missing-dependencies)> 0 @warn "Nicht erfüllte Abhängigkeiten! Folgende Funktionen sind erforderlich: # $ missing-dependencies."; @return length ($ missing-dependencies)! = 0;
Wie Sie sehen, ist es nicht viel komplexer als unsere vorherige Version. Außerdem ist die Verwendung noch einfacher:
@ function dummy () @if fehlende Abhängigkeiten (my-function, my-other-function) @return null; // Kern der 'Dummy'-Funktion, // benötigt offensichtlich' my-function 'und' my-other-function ', um zu funktionieren.
Sehen? Wir können das aufgeben @warnen Direktive, aber wenn eine oder mehrere Funktionen fehlen, wird der Entwickler aufgefordert:
Nicht erfüllte Abhängigkeiten! Folgende Funktionen sind erforderlich: my-function, my-other-function.
Das Hauptproblem, das ich mit dieser Funktion sehen kann, ist, dass Sie das brauchen fehlende Abhängigkeiten Funktion! An diesem Punkt ist die Abhängigkeitsprüfung im Wesentlichen eine Abhängigkeit… Sie sehen die Ironie.
Das ist weil fehlende Abhängigkeiten (…) wird in Situationen, in denen fehlende Abhängigkeiten bezieht sich nicht auf Funktionen und eine Zeichenfolge wird immer als ausgewertet wahr. Also wenn es geht @ fehlende Abhängigkeiten (…), Sie tun effektiv @if Zeichenfolge, Das ist immer wahr, so dass Sie diese Bedingung immer erfüllen.
Um dies zu vermeiden, gibt es eine clevere Lösung. Anstatt einfach zu tun @ fehlende Abhängigkeiten (…), wir könnten @if fehlende Abhängigkeiten (…) == wahr. In Sass, == ist wie === In anderen Sprachen werden nicht nur der Wert, sondern auch der Typ geprüft.
@ function dummy () @fehende Abhängigkeiten (my-function, my-other-function) == true @return null; // Kern der 'Dummy'-Funktion, // benötigt offensichtlich' my-function 'und' my-other-function ', um zu funktionieren.
Wenn die Funktion nicht vorhanden ist, wird der Aufruf, wie wir zuvor gesehen haben, als Zeichenfolge behandelt. Während eine Zeichenfolge mit bewertet wird wahr, es ist nicht streng gleich wahr, weil es ein ist String Typ, nicht a Bool Art.
Also an diesem Punkt, wenn die fehlende Abhängigkeiten Funktion ist nicht vorhanden, die Bedingung wird nicht erfüllt, daher kann die Funktion normal ausgeführt werden (obwohl sie abstürzt, wenn irgendwo im Code eine Abhängigkeit fehlt). Was cool ist, weil wir nur Dinge verbessern, ohne sie zu brechen.
Ein weiteres Problem bei dieser Funktion besteht darin, dass nur nach fehlenden Funktionen und nicht nach Mixins oder globalen Variablen gesucht wird. Dies ist jedoch leicht zu erreichen, indem der Code für die Abhängigkeitsprüfung angepasst wird.
Was wäre, wenn jedes an die Funktion übergebene Argument eine Liste von zwei Elementen sein könnte, mit dem Abhängigkeitstyp als erstes Argument (entweder Funktion, mixin oder Variable) und der Name der Abhängigkeit als zweiter? Zum Beispiel:
fehlende Abhängigkeiten (Funktion my-function, Variable my-cool-variable);
Wenn wir Funktionen eher als Abhängigkeiten verwenden, könnten wir dies tun Funktion die Standardeinstellung, so dass der vorherige Aufruf folgendermaßen aussehen würde:
fehlende Abhängigkeiten (my-function, variable my-cool-variable);
Im Grunde ist es so, als würde man fragen, ob die Funktion funktioniert meine Funktion existiert und die Variable meine-cool-Variable existiert, weil sie für eine gegebene Aufgabe benötigt werden. Klar so weit?
Nun zum Code. Wir können die verwenden Anruf() Funktion, um anzurufen TYPE - existiert (NAME). Alles andere ist genauso wie zuvor.
Accentsconagua
@ function missing-dependencies ($ dependencies…) $ missing-dependencies: (); @each $ Abhängigkeit in $ Abhängigkeiten $ type: "function"; // Standardtyp der Abhängigkeit @if Länge ($ Abhängigkeit) == 2 $ type: nth ($ Abhängigkeit, 1); $ type: if (index ("function" "mixin" "variable", $ type), $ type, "function"); Abhängigkeit von $: nth (Abhängigkeit von $, 2); @if not call ("# $ type -exists", $ dependency) $ fehlende-Abhängigkeiten: append ($ missing-dependencies, $ dependency, Komma); @if length ($ missing-dependencies)> 0 @warn "Nicht erfüllte Abhängigkeiten! Folgende Abhängigkeiten sind erforderlich: # $ missing-dependencies."; @return $ missing-dependencies! = 0; Ziemlich cool, heh? Dadurch wird der Code etwas komplexer. Wenn Sie also wahrscheinlich andere Arten von Abhängigkeiten haben (was bei SassyLists nicht der Fall ist), sollten Sie bei der ersten Version bleiben, die wir gesehen haben.
Hinweis: Sie möchten möglicherweise automatisch eine Variable tippen Sie in Globale Variable um anzurufen globale Variable existiert, weil es wahrscheinlich ist, dass eine erforderliche Variable eine globale ist.
Das ist so ziemlich Leute. Offensichtlich ist dies keine alltägliche Sass-Funktion. Ich denke jedoch, dass in vielen Fällen, insbesondere beim Erstellen von Bibliotheken, Frameworks und Erweiterungen, diese Tipps hilfreich sein können. Lassen Sie mich wissen, was Sie in den Kommentaren denken!
