CSS-Preprozessoren im Vergleich zwischen Sass und LESS

Es gibt eine Reihe von CSS-Präprozessoren, LESS, Sass, Stylus und Swith CSS, um nur einige zu nennen. CSS-Präprozessor, Wie wir schon oft gesagt haben, soll in erster Linie das Authoring von CSS dynamischer, organisierter und produktiver werden. Aber, Die Frage ist, wer von ihnen den Job am besten macht?

Natürlich würden wir uns nicht alle ansehen, sondern nur zwei der beliebtesten vergleichen: Sass und WENIGER. Um zu entscheiden, werden wir die beiden Faktoren in sieben Faktoren vergleichen: Derjenige, der bessere Ergebnisse erzielt, erhält einen Punkt; Im Falle eines Unentschiedens erhalten beide einen Punkt.

Lass uns anfangen.

Installation

Beginnen wir mit dem sehr grundlegenden Schritt, Installation. Sowohl Sass als auch LESS basieren auf unterschiedlichen Plattformen. Sass läuft unter Ruby, während LESS eine JavaScript-Bibliothek ist (was es ist) war eigentlich auch auf Ruby gebaut zu Beginn).

Sass: Sass benötigt Ruby, um funktionieren zu können. In Mac wurde dies bereits vorinstalliert. In Windows müssen Sie es jedoch wahrscheinlich erst installieren, bevor Sie mit Sass spielen können. Außerdem muss Sass über das Terminal oder die Eingabeaufforderung installiert werden. Es gibt mehrere GUI-Anwendungen, die Sie verwenden können, diese sind jedoch nicht kostenlos.

WENIGER: WENIGER basiert auf JavaScript. Daher ist die Installation von LESS so einfach wie das Verknüpfen der JavaScript-Bibliothek mit Ihrem HTML-Dokument. Es gibt auch einige GUI-Anwendungen, die beim Kompilieren von LESS zu CSS helfen, und die meisten davon sind kostenlos und funktionieren sehr gut (z. B. WinLess und LESS.app)..

Fazit: Weniger ist klar an der Spitze.

Erweiterungen

Sowohl Sass als auch LESS verfügen über Erweiterungen für eine schnellere und einfachere Webentwicklung.

Sass: In unserem letzten Beitrag hatten wir über Compass gesprochen, die aktuelle und beliebte Erweiterung auf Sass-Basis. Compass verfügt über eine Reihe von Mixins, um die CSS3-Syntax in kürzerer Zeit zu schreiben.

Compass ist jedoch mehr als nur CSS3-Mixins, es wurden jedoch weitere nützliche Funktionen wie Helfer, Layout, Typografie, Rasterlayout und sogar Sprite-Bilder hinzugefügt. Es hat auch config.rb Datei, in der wir die CSS-Ausgabe und einige andere Einstellungen steuern können. Kurz gesagt, Compass ist ein All-in-One-Paket für die Webentwicklung mit Sass.

WENIGER: LESS hat auch mehrere Erweiterungen, aber im Gegensatz zu Compass, das alles, was wir brauchen, an einem Ort hat, sind sie voneinander getrennt, und jede von ihnen wird von verschiedenen Entwicklern erstellt. Dies ist für erfahrene Benutzer kein Problem, aber für diejenigen, die gerade erst mit LESS anfangen, müssen sie sich etwas Zeit nehmen, um die richtigen Erweiterungen auszuwählen, die zu ihrem Workflow passen.

Hier einige LESS-Erweiterungen, die Sie möglicherweise in Ihr Projekt aufnehmen müssen:

CSS3 Mixins: WENIGER Elemente, Preboot, WENIGER Mixins.
Gitter: 960.gs, Frameless, Semantic.gs
Layout: Sogar weniger
Sonstiges: Twitter Bootstrap

Fazit: Ich denke, wir müssen uns darauf einigen, dass Sass und Compass ein großartiges Duo sind und die Sprite-Image-Funktion ist wirklich ein Kuss, also ein Punkt für Sass hier.

Sprachen

Jeder CSS-Präprozessor hat eine eigene Sprache und ist meistens verbreitet. Beispielsweise haben sowohl Sass als auch LESS Variablen, es gibt jedoch keinen signifikanten Unterschied, außer dass Sass Variablen mit a definiert $ unterzeichnen, während LESS es mit einem tut @ Zeichen. Sie machen immer noch dasselbe: Einen konstanten Wert speichern.

Im Folgenden werden einige der am häufigsten verwendeten Sprachen sowohl in Sass als auch in LESS (basierend auf meiner Erfahrung) untersucht..

Verschachtelung

Die Verschachtelungsregel ist eine bewährte Methode, um zu vermeiden, dass Selektoren wiederholt geschrieben werden. Sass und LESS verwenden die Verschachtelungsregeln auf dieselbe Weise.

Sass / Scss und WENIGER

 nav margin: 50px auto 0; Breite: 788px; Höhe: 45px; ul padding: 0; Marge: 0;

Sass / Scss geht jedoch noch einen Schritt weiter, indem es uns erlaubt, auch einzelne Eigenschaften zu verschachteln. Hier ein Beispiel:

 nav margin: 50px auto 0; Breite: 788px; Höhe: 45px; ul padding: 0; Marge: 0;  border: style: solid; links: Breite: 4px; Farbe: # 333333;  right: width: 2px; Farbe: # 000000;

Dieser Code generiert die folgende Ausgabe.

 nav margin: 50px auto 0; Breite: 788px; Höhe: 45px; Bordüre: solide; Rahmenbreite links: 4px; Rahmenfarbe links: # 333333; Rahmenbreite rechts: 2px; Rahmenfarbe rechts: # 000000;  nav ul padding: 0; Marge: 0;

Fazit: Das Verschachteln einzelner Eigenschaften ist eine schöne Ergänzung und wird berücksichtigt beste Übung, besonders, wenn wir dem DRY-Prinzip folgen (sich nicht wiederholen). Ich denke, es ist klar, was in diesem Fall besser ist.

Mixins und Selector-Vererbung

Mixins in Sass und LESS sind etwas anders definiert. In Sass verwenden wir die@mixin Direktive in LESS definieren wir es mit dem Class Selector. Hier ist ein Beispiel:

Sass / Scss

 @mixin border-radius ($ values) border-radius: $ values;  nav margin: 50px auto 0; Breite: 788px; Höhe: 45px; @umschließen den Grenzradius (10px);

WENIGER

 .border (@radius) border-radius: @radius;  nav margin: 50px auto 0; Breite: 788px; Höhe: 45px; Rand (10px);

Mixins in Sass und LESS ist es gewohnt umfassen Eigenschaften von einem Regelsatz zu einem anderen Regelsatz. In Sass wird diese Methode mit weitergeführt Selector Vererbung. Das Konzept ist identisch, aber anstatt die gesamten Eigenschaften zu kopieren, erweitert oder gruppiert Sass Selektoren, die die gleichen Eigenschaften und Werte haben, mit dem @erweitern Richtlinie.

Sehen Sie sich dieses Beispiel unten an:

 .Kreis Rand: 1px fest #ccc; Grenzradius: 50px; Überlauf versteckt;  .avatar @extend .circle;

Dieser Code ergibt als;

 .Kreis, .avatar border: 1px fest #ccc; Grenzradius: 50px; Überlauf versteckt;

Fazit: Sass ist durch eindeutige Vererbung von Mixins und Selectors einen Schritt voraus.

Operationen

Sowohl Sass als auch LESS können grundlegende mathematische Operationen ausführen, aber manchmal liefern sie unterschiedliche Ergebnisse. Sehen Sie, wie sie diese Zufallsberechnung durchführen:

Sass / Scss

 $ margin: 10px; div Marge: $ Marge - 10%; / * Syntaxfehler: Inkompatible Einheiten: '%' und 'px' * /

WENIGER

 @ Margin: 10px; div Marge: @ Margin - 10%; / * = 0px * /

Fazit: Sass macht es in diesem Fall genauer; Da% und px nicht gleichwertig sind, sollte ein Fehler ausgegeben werden. Ich hoffe zwar, dass es so etwas sein kann 10px - 10% = 9px.

Fehlerbenachrichtigungen

Fehlerbenachrichtigung ist wichtig, um zu sehen, was wir falsch machen. Stellen Sie sich Tausende von Codezeilen und ein kleines bisschen Fehler irgendwo im Chaos vor. Eine klare Fehlerbenachrichtigung wird der beste Weg sein, das Problem schnell zu lösen.

Sass: In diesem Beispiel verwende ich nur die Eingabeaufforderung, um den Compiler auszuführen. Sass generiert eine Fehlermeldung, wenn der Code ungültig ist. In diesem Fall entfernen wir ein Semikolon in Zeile 6, was zu einem Fehler führen sollte. Schauen Sie sich den Screenshot unten an.

Als ich diese Benachrichtigung zum ersten Mal sah, konnte ich sie kaum verstehen. Es scheint auch, dass Sass etwas falsch ist, wo der Fehler liegt. Es sagte, dass der Fehler eingeschaltet ist Zeile 7, statt 6.

WENIGER: Mit demselben Fehlerszenario wird die LESS-Benachrichtigung besser dargestellt und scheint auch genauer zu sein. Schauen Sie sich diesen Screenshot an:

Fazit: WENIGER liefert bessere Erfahrungen in dieser Angelegenheit und gewinnt zweifellos.

Dokumentation

Die Dokumentation ist für jedes Produkt sehr wichtig. Selbst erfahrene Entwickler würden Schwierigkeiten haben, auf Dinge zu verzichten Dokumentation.

Sass: Wenn wir uns die Dokumentation auf der offiziellen Seite ansehen, fühle ich mich persönlich in einer Bibliothek, die Dokumentation ist sehr umfangreich. Allerdings ist das Look and Feel, wenn es für Sie wichtig ist, nicht motivierend für das Lesen, und der Hintergrund ist einfach weiß.

Die Präsentation ist viel mehr eine W3-Dokumentation oder WikiPedia. Ich weiß nicht, ob dies der Standard für die Anzeige von Dokumentation im Internet ist, aber es ist nicht der einzige Weg.

WENIGER: Auf der anderen Seite ist die LESS-Dokumentation klarer, ohne zu viele Texterklärungen, und sie taucht direkt in die Beispiele ein. Es hat auch eine gute Typografie und eine bessere Farbgebung. Ich denke, das war der Grund, warum LESS meine Aufmerksamkeit überhaupt erst erweckt hat, und ich kann es aufgrund des Layouts und der Präsentation der Dokumentation schneller lernen.

Fazit: Die LESS-Dokumentationspräsentation ist besser, obwohl Sass über eine umfassendere Dokumentation verfügt. Ich denke, wir können dies als Unentschieden bezeichnen.

Letzter Gedanke

Ich denke, das ist eine klare Schlussfolgerung Sass ist besser mit einer Gesamtpunktzahl von 5 gegen 3 für WENIGER. Dies bedeutet jedoch nicht, dass LESS schlecht ist. Sie müssen nur besser sein. Am Ende liegt es noch am Endbenutzer, den Präprozessor seiner Wahl auszuwählen. Sei es Sass oder WENIGER, solange sie komfortabel und produktiver sind, ist dies der Gewinner in ihrer Liste.

Wenn Sie zu diesem Thema etwas im Sinn haben, können Sie es gerne in das Kommentarfeld eingeben.