Heute werden wir zwei CSS-Preprozessoren gegeneinander antreten. Sie haben zweifellos viele Diskussionen darüber geführt, wie SCSS mit LESS verglichen wird. Kann es möglicherweise der Leistungsfähigkeit und Vielseitigkeit von SASS entsprechen?
Wir werden zuerst in beide Syntax einsteigen und sie nebeneinander vergleichen, um zu sehen, was logischer und vielseitiger ist. Wir sprechen auch über Funktionen und geben Ihnen ein klares Argument dafür, warum ein Präprozessor leistungsfähiger ist. Sie können sich darauf verlassen, dass wir uns nicht über die Krawatte lustig machen, es wird einen Gewinner geben!
Sass, nicht SCSS
Ein kleines Detail muss angesprochen werden, bevor wir weiter darauf eingehen. Die Syntax, die wir heute verwenden werden, ist Sass. nicht SCSS. Letzteres ist die neueste Form, also wahrscheinlich die, die Sie am besten kennen.
Zum Vergleich ist Sass jedoch viel näher an Stylus als sein Bruder SCSS. Während SCSS ein Versuch war, Sass wieder zu regieren und die Syntax enger zu spiegeln, folgt Stylus den Wegen der ursprünglichen Sass-Sprache, indem er die meisten strukturellen Syntax wie Semikolons und geschweifte Klammern aufgibt.
Leider ist dies kein Artikel über die Vorzüge von Sass vs. SCSS, daher werde ich auf dieses Thema nicht weiter eingehen. Wenn Sie auf der Suche nach einer guten Diskussion zu diesem Thema sind, sehen Sie sich folgende Informationen an: Sass vs. SCSS: Welche Syntax ist besser? von The Sass Way. Denken Sie im Allgemeinen daran, dass Sass und SCSS weitgehend identisch sind. Der einzige Unterschied besteht darin, wie Sie sie schreiben.
Grundlegende Syntax
Beginnen wir mit einem direkten Vergleich beider Syntaxen auf ihrer grundlegendsten Ebene. Wir schreiben dieselbe Erklärung für beide Sprachen und sehen, wo die Unterschiede liegen.
Wie Sie sehen, sind sie fast identisch. Keine der beiden Syntax erfordert geschweifte Klammern oder Semikolons, was natürlich bedeutet, dass beide für das korrekte Kompilieren ziemlich abhängig von Leerzeichen sind. Der große Unterschied, den wir an dieser Stelle sehen, ist der Doppelpunkt: Sass verlangt sie, Stylus nicht.
Flexibilität
Was ich an LESS und SCSS immer sehr geschätzt habe, ist, dass ich in meinem Stylesheet noch einfaches Vanille-CSS schreiben kann. Diese Syntaxen sind so nah an CSS, dass Sie Schlüsselpunkte auswählen können, um ihre speziellen Funktionen zu implementieren, aber Sie müssen Ihr Gehirn nicht wirklich neu trainieren, um CSS zu schreiben.
Soweit ich das beurteilen kann, hat Sass diese Fähigkeit nicht, aber Stylus hat dies offenbar (hier demonstriert). Ich verwende jedoch CodeKit, um meinen Stylus zu kompilieren, wodurch ich kein reines CSS mit Sass oder Stylus mischen kann. Wenn ich eine einfache Zeile mit reinem CSS anwende, wird der Code nicht kompiliert (beide Sprachen haben eine Fehlerberichterstattung).
Allerdings gibt es mit Stylus und Codekit ein bisschen Flexibilität, die Sie in Sass nicht finden werden. Zum Beispiel benötigt der Stylus keine Doppelpunkte oder Semikola, aber beide können verwendet werden. Es mag einfach keine geschweiften Klammern. Sass hingegen benötigte Doppelpunkte und wird nicht kompiliert, wenn Sie Semikolons verwenden.
Basissyntax Gewinner: Stylus
Wenn Sie eine reduzierte Präprozessor-Syntax verwenden, ist Stylus meiner Meinung nach der bessere der beiden. Die einfache Antwort ist, dass Sie mit Stylus Ihren Verbos-Level wählen können, während Sass Sie zu einer festgelegten Methode zwingt.
Um ehrlich zu sein, der Grund, weshalb ich Stylus als Gewinner deklariere, könnte Sie dazu bringen, es als Verlierer zu betrachten. Flexible Syntax ist ein Schimpfwort mit vielen Codierern, da dies zu schlampigen, inkonsistenten Codierungen führen kann. Wenn Sie Stylus verwenden möchten, sollten Sie eine Deklarationsmethode wählen und sich daran halten. Schreiben Sie nicht zwei Codezeilen, die nur Semikolons verwenden. Wechseln Sie dann in Doppelpunkte, und wechseln Sie dann wieder in keine.
Verschachtelung
Durch die Verschachtelung können Sie sich wiederholende Codierungen sparen, indem Sie Selektoren ineinander verschachteln. Also, wenn ein? P? Selektor ist in einem? div? Selector, das Compile-Ergebnis wird sowohl? div? und? div p ?. Diese Funktionalität ist bei Stylus und Sass nahezu identisch.
Sass geht das Konzept der Verschachtelung tatsächlich noch einen Schritt weiter und erlaubt Ihnen, sich die Mühe zu ersparen, sich wiederholende Eigenschaftsnamen einzugeben. Betrachten Sie beispielsweise das folgende Beispiel. In Stylus müssen Sie die Schriftart wiederholen. Teil, aber Sass erlaubt das Verschachteln als alternative Methode.
Gewinner: Sass
Die einfache Tatsache hier ist, dass Sass eine coole Funktion hat, die Stylus nicht hat. Ich habe es noch nie benutzt und bin mir nicht sicher, ob ich jetzt anfangen möchte, aber ich kann sehen, wie es nützlich wäre, insbesondere in Fällen wie Textausrichtung, Textschatten, Textdekoration usw., in denen keine Abkürzungsalternative vorhanden ist .
Variablen
Einer der größten Anziehungspunkte für Präprozessoren ist die Einbeziehung von Variablen. Viele Entwickler der alten Schule glauben, dass Variablen in der Nähe von CSS keine Rolle spielen, aber unzählige andere glauben, dass Variablen eine der coolsten Möglichkeiten sind, CSS überhaupt zu treffen. Ich persönlich finde CSS-Variablen sehr nützlich.
Sowohl Stylus als auch Sass bieten variable Unterstützung. So sieht jeder aus, wenn eine Variable verwendet wird, um die Schriftgröße für einen Absatz festzulegen.
Wieder sehen wir, dass die Stylus-Syntax etwas knapper ist. Beachten Sie, dass Sass die Verwendung eines zusätzlichen Zeichens (des Dollarzeichens) zum Referenzieren von Variablen erfordert. Der Stylus verwendet auch ein Gleichheitszeichen anstelle eines Doppelpunkts, was JavaScript-Entwicklern vertraut sein sollte.
Beide Sprachen ermöglichen auch variable Operationen, sodass Sie Variablen zum Inhalt Ihres Herzens hinzufügen, subtrahieren, multiplizieren und dividieren können.
Gewinner: Unentschieden (ich bevorzuge die Sass-Syntax)
Lassen Sie uns das klarstellen: Wenn wir alles nur mit der Ausführlichkeit erzielen, wird Stylus weiter gewinnen. Es ist die kürzere Syntax, Punkt. Die Annahme, dass kürzer ist, ist jedoch nicht immer richtig.
Interessanterweise denke ich, ich persönlich bevorzuge den Sass-Weg hier. Die Doppelpunkt-Syntax einfach fühlt sich eher wie CSS. Außerdem sind die Leute so daran gewöhnt, Variablen in ihrem CSS zu sehen, dass die Dollarzeichen ihnen wirklich helfen, hervorzustechen. Ich kann mühelos hunderte Zeilen von Sass scannen und die Variablen erkennen, eine Aufgabe, die mit Stylus erheblich schwieriger ist.
Suche nach Eigenschaften
Während wir uns mit Variablen befassen, ist es erwähnenswert, dass Stylus eine einzigartige Eigenschaftssuche hat. Diese Funktion ermöglicht es Ihnen, einige der Variablen zu sparen, die Sie normalerweise mit Sass verwenden müssen. Angenommen, Sie wollten die Auffüllung eines Elements auf die Hälfte seines Randes setzen. Mit Sass müssen Sie dazu Variablen verwenden (soweit ich das beurteilen kann), aber mit Stylus können Sie die? @? Syntax, um auf den Wert einer anderen Eigenschaft innerhalb desselben Deklarationsblocks zu verweisen.
Gewinner: Stylus
Sass hat nicht einmal ein Äquivalent zu der Eigenschaftssuche, daher ist dies kein Wettbewerb. Ich persönlich mag diese Fähigkeit wirklich sehr und hoffe, dass die Sass-Leute es in Betracht ziehen, sie hinzuzufügen.
Mixins & Funktionen
Als nächstes schauen wir uns die Mixins an. Diese Variablen ähneln Variablen für große Codeabschnitte anstelle einer einzelnen Eigenschaft oder eines einzelnen Werts. Mixins sind vielleicht eines der mächtigsten Werkzeuge, die CSS-Präprozessoren haben, um Zeit und Energie zu sparen. Wenn Sie wissen, wie Sie Mixins richtig einsetzen, wird Ihre Arbeit so viel einfacher!
Hier ist ein Beispiel der Stylus- und Sass-Syntax für eine typische Definition des Grenzradius. Der Vorteil hierbei ist, dass Sie alle Browser-Präfixe nur einmal ausschreiben müssen und dann dem Präprozessor erlauben, seine Zauberkraft überall dort anzuwenden, wo Sie sie einsetzen.
Wieder sehen wir, dass Sass ein paar zusätzliche Symbole und Syntax erfordert, während Stylus die Dinge ziemlich sauber hält. Beachten Sie auch, dass Stylus die Option "transparente Mixins" verwenden kann. wo Sie nicht einmal Klammern verwenden müssen, wenn Sie das Mixin aufrufen. Es sieht so aus, als würde ich nur die Standardeigenschaft mit dem Grenzradius verwenden, obwohl ich tatsächlich mein Mixin verwende.
Funktionen sind ein ähnliches Konstrukt, nur sie sind normalerweise dazu gedacht, eine Operation auszuführen und einen Wert zurückzugeben. Hier ist die Funktionssyntax für jede Sprache:
Gewinner: Stylus
Nachdem er das Mixin und die Funktionen mit Stylus geschrieben und dann zu Sass zurückgekehrt war, schien letzterer einfach mehr Arbeit zu sein. Der Stylus-Weg ist wirklich mühelos, während Sass Sie ständig ausschreibt? @Mixin ?,? @Include ?,? @Function? und? @return ?, was sich überflüssig fühlt.
Das Fleisch des Arguments: Welches ist besser?
Ich bin nicht der erste, der einen direkten Vergleich von Beispielen wie dem oben genannten durchführt, obwohl ich absichtlich einen Schritt weiter gegangen bin als andere, indem ich meine Präferenz in jedem Fall deutlich erklärte.
Alles in allem sind sowohl Sass als auch Stylus viel zu groß, als dass ich diesen Weg des Syntaxvergleichs fortsetzen könnte. Es gibt viele weitere Fälle, in denen Sie feststellen könnten, dass Stylus und Sass in ihren Ansätzen fast identisch sind. Hier sind einige Funktionen, die beide gemeinsam haben:
- Interpolation
- Vererbung der Auswahl durch @extend
- If und else-Style-Bedingungen (Steueranweisungen)
- Eingebaute Farbfunktionen
- Iteration
- Direktiven importieren
Sie sollten ein Gefühl dafür haben, wie die einzelnen Sprachen jetzt funktionieren. Lassen Sie uns nun ein paar Diskussionen darüber führen, wo sie sich unterscheiden und warum das wichtig ist. Eine Sache, über die man sofort nachdenken muss, ist, dass Stylus speziell für Node.js entwickelt wurde. Wenn Sie also ein Node-Fan sind, könnte dies der richtige Weg sein.
Meistens scheint es, dass Stylus die flexiblere und noch leistungsfähigere Option ist. Es gibt einige Fälle, in denen Sass einen Trick bringt, den Stylus nicht kann, aber ich habe noch keinen "Stylus-Killer" gefunden. Eine Eigenschaft, die mich klar zum Ausdruck bringen würde, dass Sass der Beste ist.
Umgekehrt scheint es eine Unmenge kleiner Dinge zu geben, die Sie finden, wenn Sie nach Stylus graben, das Sie vermissen, wenn Sie wieder zu Sass wechseln. Ich habe bereits einige davon erwähnt, beispielsweise die Eigenschaftssuche, ein weiteres interessantes Argument ist die "Argumentation". Automatische lokale Variable für Mixins. Dadurch können Sie den Schritt des Erstellens Ihrer eigenen Variablen überspringen, um alle Argumente eines Mixins zu duplizieren. Es gibt auch die Rest-Parameter-Funktion, die die verbleibenden Argumente verbraucht, die an ein Mixin oder eine Funktion übergeben werden (diese Funktion ist möglicherweise in Sass, aber ich habe sie nicht gefunden):
Schließlich nimmt Stylus auch die mit den Klammern ein wenig sperrigen und umständlichen Medienanfragen ab. Hier ist eine Abfrage der Stylus-Druckmedien:
Was ist mit SCSS?
Mein täglich bevorzugter Präprozessor ist Sass mit der SCSS-Syntax. Bis zum Verfassen dieses Artikels hatte ich mit keiner der abgespeckten Syntaxen viel experimentiert, da es mir ein wenig beängstigend war, alle Regeln, die ich in meinem Gehirn hatte, wegzuwerfen.
Außerdem mag ich die Idee, dass sich etwas in meinen aktuellen CSS-Workflow einfügt, anstatt es von Grund auf zu ändern. Allerdings habe ich mich schnell an die Arbeitsweise des Stylus gewöhnt und es stört mich nicht so sehr, wie ich gedacht hätte. Es ist sehr schön, diese Doppelpunkte aufzugeben!
Nehmen wir an, Sie können sich einfach nicht daran gewöhnen oder denken, dass es eine schlechte Praxis ist, eine gestrippte Syntax zu verwenden, weil Sie dann vergessen werden, wie man richtiges CSS schreibt. In diesem Fall ist SCSS der richtige Weg? Vielleicht nicht.Wenn Sie die Befehlszeile oder einen besseren Compiler als CodeKit verwenden, können Sie mit Stylus den CSS-Stil übernehmen. Syntax bedeutet, dass Sie alle in Stylus enthaltenen Leckerbissen nutzen können, ohne die unheimliche Minimalmethode des CSS-Authorings zu akzeptieren.
Was ist mit Kompass?
Ein absolut grundlegendes Stück dieses Puzzles ist Compass, der Sass zu neuen Höhen der Großartigkeit führt. Wenn Sie sich auf dieses Tool verlassen, ist es offensichtlich schwieriger, zu Stylus zu wechseln. Es gibt jedoch ein eng verwandtes Projekt namens Nib, das versucht, Stylus mit einer ähnlichen CSS3-Güte zu versehen.
Fazit
Es tut mir weh, es zu sagen, aber Stylus scheint wirklich in vieler Hinsicht die Oberhand zu haben. Es hat den Vorteil, von dem, was mit Sass gemacht wurde, zu lernen und es zu verbessern. Davon abgesehen werde ich SCSS wahrscheinlich nicht so schnell aufgeben. Ich glaube an das Sass-Projekt und bin zuversichtlich, dass seine weit verbreitete Akzeptanz weiterhin viele Verbesserungen bringen wird. Ich bin nicht sicher, ob ich das gleiche Vertrauen in Stylus habe.
Hinterlassen Sie einen Kommentar und lassen Sie uns wissen, was Sie denken. Welchen Präprozessor halten Sie für besser und warum? Unabhängig davon, welche mehr Tricks im Ärmel hat, welche werden Sie auf lange Sicht einsetzen?