LESS und Sass zielen darauf ab, dasselbe zu erreichen und sind sich tatsächlich so ähnlich, dass Sie die beiden leicht verwechseln könnten, aber sind sie wirklich gleichwertig? Gibt es etwas, das einer tun kann, was der andere nicht kann?
Auf einer Feature-zu-Feature-Basis hat jede Syntax ein oder zwei Dinge, die die andere nicht kennt. Trotz der Tatsache, dass ich anfangs zu LESS 'Einfachheit hingezogen wurde, konnte ich mich auf lange Sicht nicht von einigen wichtigen Features ablenken lassen, die Sass wirklich mächtig machen. Folgen Sie mir, während ich Sie mit einigen der erstaunlichen und einzigartigen Funktionen von Sass in Atem versetze.
WENIGER vs. Sass
Sowohl Sass als auch LESS gibt es schon eine ganze Weile, aber es scheint, als ob sie 2011 wirklich einen Schritt nach vorne gemacht haben und sehr populär wurden. Beide bieten hervorragende Möglichkeiten, um CSS zu erweitern, um für Programmierer benutzerfreundlicher zu sein. Dies führt zu logischeren und prägnanteren Code, der weitaus weniger Wiederholungen benötigt.
Wer ist freundlicher?
Vor kurzem hier auf Design Shack habe ich LESS viel Aufmerksamkeit gewidmet. Zugegebenermaßen halte ich es für die zwei Optionen. Einige werden gegen diese Vorstellung argumentieren, bis sie blau im Gesicht sind, aber die einfache Tatsache bleibt, dass LESS eine wirklich nette Einrichtung hat: Verwenden Sie eine einfache .js-Datei zum Testen und kompilieren Sie den Code automatisch mit einer benutzerfreundlichen App: Weniger. App.
Egal, wie sehr Sie glauben, dass jeder CSS-Entwickler Ruby kennen sollte und ein Endläufer sein sollte, die Realität ist, dass viele dieser Beschreibung überhaupt nicht entsprechen und lieber den Tag damit verbringen würden, eine Sache (LESS) anstatt zwei (Sass +) zu lernen wie Ruby-Edelsteine funktionieren).
Zugegeben, Sass erfordert nur ein winziges Stückchen Terminal-Einsatz, mit dem sich praktisch jeder auskennen kann, aber Sie werden überrascht sein, wie viele Leute aufgrund dessen abgewiesen werden.
Nicht so schnell
In letzter Zeit hat sich diese Landschaft jedoch dramatisch verändert. Lösungen wie CodeKit tauchen auf, die das Schreiben von Sass und das Ausgeben von CSS genauso mühelos machen wie das Verwenden von Sass.
Tatsächlich kompiliert CodeKit automatisch LESS-, Sass-, Stylus- und CoffeeScript-Dateien. Alles, was Sie tun müssen, ist, in Ihrem Projektordner abzulegen, und Ihre Arbeit ist erledigt. So viel weniger, freundlicher zu sein!
Wer ist mächtiger?
Für viele Entwickler ist das Argument, das einfacher zu implementieren ist, ziemlich unbedeutend, wenn man bedenkt, dass sowohl LESS als auch Sass ziemlich einfach zu verwenden sind. Das eigentliche Argument kommt dann auf die Macht an: Welche Sprache kann mehr?
Die Antwort ist nicht so einfach. Es stellt sich heraus, dass sowohl LESS als auch Sass einzigartige Funktionen haben, die der andere nicht hat. Es muss jedoch gesagt werden, dass Sass in dieser Gegend wirklich beeindruckende Schläge hervorbringt. Schauen wir uns zwei meiner Favoriten an: @extend und Kontrollstrukturen.
Sass @extend
Jedes Mal, wenn ich etwas über LESS sage, schwärmen die Leute im Sass-Lager von Sass '@extend-Befehl. Es stellt sich heraus, dass es einen guten Grund dafür gibt: Es ist eigentlich ziemlich nützlich.
Der Zauber von @extend besteht darin, dass Sie Selektoren mit Stil versehen, die auf anderen Selektoren huckepack wirken und deren Eigenschaften ausleihen. Nehmen wir an, Sie haben einen Blog gestaltet und wollten zwei verschiedene Stilgruppen: einen Satz für einen Kommentar und einen für alle Antworten auf diesen Kommentar. Ihr Stil für jeden sieht fast identisch aus, bis auf wenige Ausnahmen:
Alternativ können Sie nur die .reply verwenden. Klasse für die verschiedenen Stile, aber dies erfordert, dass Sie sowohl die? .com? und? bitte? Klassen zu Ihrer Antwort HTML Divs. Wie können wir also unser Markup schmal halten, diesen Code jedoch weniger repetitiv machen?
Mit Sass '@extend ist dieser Prozess sehr einfach. Sobald wir unseren ursprünglichen Selector eingerichtet haben, geben wir einfach @extend ein. plus den Namen des Selektors, den wir stehlen möchten, und der gesamte Code des ersten Selektors wird auf den zweiten Selektor angewendet. Von hier aus können wir dann unsere Ausnahmen, Ergänzungen usw. anwenden.
Beachten Sie, dass wir die neuere .scss-Syntax verwenden.
CSS-Ausgabe
Die Ausgabe dieses @extend-Befehls ist nett und sauber und zeigt wirklich, wie wir unser CSS überhaupt erst hätten kodieren sollen. Sass findet automatisch sowohl die gemeinsam genutzten als auch die eindeutigen Eigenschaften und setzt sie auf die entsprechenden Selektoren.
Warum machen Sie das nicht gleich? Tolle Frage! Sie könnten genau das tun. Die Sass-Syntax stellt jedoch einen etwas lineareren Denkprozess dar, der für manche leichter zu verstehen ist.
Denken Sie daran, dass dies ein zu stark vereinfachtes Beispiel ist. Wenn Sie mit einem riesigen Projekt mit Tonnen von Selektoren arbeiten, sind die Vorteile von Sass noch deutlicher.
Weitergehen
Das @extend-Verhalten kann mit seiner Komplexität einigermaßen umgehen.Sie können beispielsweise mehrere Erweiterungen für einen einzigen Selektor verwenden:
Sie können @extends auch verketten. Auf diese Weise können Sie schrittweise Komplexitätsschichten auf leicht verständliche Weise erstellen.
Wie Sie sehen, ist dies tatsächlich etwas einfacher zu interpretieren als die kompilierte CSS-Form, die zwar prägnant ist, jedoch etwas verwirrend sein kann.
Weitere Informationen zu Sass @extends finden Sie in der offiziellen Dokumentation von der Sass-Website.
Kontrollrichtlinien
Der Sass @extend-Befehl ist definitiv ein Killerargument, wenn Sie mit Sass über LESS gehen. Es ist sehr hilfreich und hilft dabei, dass Ihr komplexes CSS sauber, übersichtlich und gut lesbar bleibt.
Auf der verrückten Skala ist @extends jedoch ziemlich niedrig. Wenn Sie wirklich sehen wollen, wo die Sass-Leute in ein skizzenhaftes Gebiet abgegangen sind, sollten Sie die Steueranweisungen überprüfen, die einige ernstzunehmende Programmierkonstrukte in CSS einfügen.
Alle Hardcore-Fans von pure CSS, die sich in Bezug auf Sass überhaupt nicht sicher sind, werden definitiv nicht gefallen, was Sie gerade sehen werden. Diejenigen von uns, die offen für Spaß mit CSS sind und bereits gerne programmieren, werden sehr interessant.
Nicht für das tägliche Styling
Wenn Sie einen Blick auf die nachstehenden Beispiele werfen und entscheiden, dass sie zu kompliziert erscheinen, um sie in Ihren Projekten verwenden zu können, haben Sie wahrscheinlich Recht. Sie kommen mit dieser Warnung direkt von den Sass-Entwicklern:
Beachten Sie, dass Steueranweisungen eine fortgeschrittene Funktion sind und im täglichen Styling nicht empfohlen werden. Sie sind hauptsächlich für den Einsatz in Mixins vorgesehen, insbesondere für Bibliotheken wie Compass, und erfordern daher eine erhebliche Flexibilität.
Wenn Aussagen
Wenn Sie nie gedacht hätten, dass Sie den Tag sehen würden, an dem sich Aussagen und CSS treffen würden, waren Sie falsch. Sass unterstützt die grundlegende if / else-Funktionalität und übersetzt sie in CSS. Im folgenden Beispiel möchten wir, dass die Textfarbe in allen Fällen schwarz ist, mit Ausnahme derjenigen, in denen die Basisfarbe bereits schwarz ist. Dann setzen wir sie auf Weiß.
Nehmen wir an, wir verwenden dieses Snippet in einer Vorlage, die wir an anderer Stelle eingerichtet haben, und importieren diese Vorlage in unsere neue Projektdatei. Wenn wir irgendwann die Basisfarbe so auf Schwarz setzen?
In unserem kompilierten CSS wird die Absatzfarbe auf Weiß gesetzt.
Wenn dagegen die Basisfarbenvariable auf etwas anderes gesetzt ist?
Die Absatzfarbe wird automatisch auf Schwarz gesetzt.
@für Schleife
Zusätzlich zu if-Anweisungen unterstützt Sass Schleifen. Angenommen, wir wollten vier Spaltenklassen erstellen, deren Breite allmählich zunimmt. Anstatt jede Klasse manuell einzugeben, können wir uns viel Arbeit sparen, indem wir einfach eine einfache for-Schleife einrichten.
Diese Anweisung wird in das folgende CSS übersetzt:
Beachten Sie, wie es verwendet wurde? counter, um die an den Klassennamen angehängte Zahl jedes Mal zu erhöhen und dann die Breite durch Multiplizieren des aktuellen? $ i? Wert um zehn Pixel.
@while-Schleife
Viele Programmiersprachen unterstützen verschiedene Arten von Loops, daher folgt Sass nicht nur ein "for". Struktur aber eine Weile? Struktur auch. Nehmen wir einmal an, wir wollen die 1-Kb-Grid-Klassen mit Sass erstellen. So würden Sie es tun:
Diese Anweisung wird zwölfmal wiederholt, wobei .grid-Klassen mit Namen erstellt werden, die sich jedes Mal um eins erhöhen und diese Klassen auf eine Breite setzen, die jedes Mal um 80 Pixel erhöht wird. Dieser winzige kleine Ausschnitt von CSS kompiliert diesen großen Code-Block:
@jeder
Die letzte Kontrollstruktur ist @each, mit der Sie eine Reihe von Variablen übersichtlich auflisten können, um sie auf einen größeren Code-Block zu verteilen. Angenommen, Sie wollten ein paar Klassen erstellen, die verschiedene Schriftfamilien verwenden, könnten Sie etwa Folgendes tun:
Dies wird in das CSS unten kompiliert.Das Ergebnis sind drei separate Klassen, die die drei Schriftnamen verwenden, die wir in der ersten Zeile darüber platziert haben.
Um mehr über die Steueranweisungen zu erfahren, sollten Sie sich unbedingt die offizielle Dokumentation ansehen. Es gibt dort ein besonders schönes @each-Beispiel, bei dem Bildnamen anstelle von Schriftarten verwendet werden. Es ist nützlicher und praktischer als mein Beispiel oben, aber ich wollte eine andere Möglichkeit veranschaulichen.
Bevor du dich beschwerst?
Das offensichtliche Argument dagegen ist, dass sie meine Argumente für einen leicht lesbaren Code verletzen. Dies spart Ihnen Zeit beim Tippen, erfordert jedoch eine ziemlich schwere Interpretation, die ausreichend ist, um Ihren Kopf zu drehen. Beachten Sie jedoch, dass die Sass-Leute diese meistens für Mixins empfehlen, was wiederum dazu beitragen kann, dass der Code aufgrund der wiederverwendbaren Eigenschaften einfacher wird.
Ich gebe gerne zu, dass es am besten ist, Kontrollstrukturen nach Möglichkeit zu vermeiden, aber ich kann nicht umhin, sich darüber zu freuen, dass Sass diese Warnhinweise oder Warnungen einschließt. Sie sprechen wirklich die Kraft der Syntax an und zeigen, wie sehr sich das Sass-Team dafür einsetzt, es zu einem äußerst fortschrittlichen und einzigartigen Webentwicklungstool zu machen.
Fazit
Dies ist keineswegs eine erschöpfende Diskussion über die Vorteile von Sass gegenüber LESS, es ist ein kurzer Blick auf die beiden Bereiche, die ich am beeindruckendsten und interessantesten fand. Sowohl die @extend- als auch die Kontrollstruktur bieten Entwicklern einige leistungsstarke Tools, die Sie sonst nirgends finden. In ähnlicher Weise hat LESS einige Tricks im Ärmel, wie Namespaces, die Sie in Sass nicht finden werden.
Letztendlich sollte es keine Rolle spielen, ob Sie Sass oder LESS verwenden. Es läuft auf eine Frage der Meinung hinaus, und wenn Sie eine bessere als die andere mögen, sollten Sie nicht wirklich das Gefühl haben, darüber zu streiten. Wenn ich die Sass-Route nehme und Sie die LESS-Route nehmen, sollten unsere beiden Websites am Ende noch eine reine CSS-Datei enthalten (Sie sollten sie vor dem Hochladen immer kompilieren). Warum sollte ich dafür sorgen, dass die Route, die Sie dorthin führten, anders war als meine? Solange der resultierende Code gültig und gut strukturiert ist, ist er genauso gut wie meiner.
Ich bin gespannt, welche Syntax Sie bevorzugen. Was mich angeht, kann ich es auch recht gut gebrauchen. Um ehrlich zu sein, habe ich fest im LESS-Camp angefangen, aber in letzter Zeit hat Sass einige der Möglichkeiten, die Sass in Features wie den oben genannten zeigt, wirklich angezogen.
Was denkst du? Mit Tools wie CodeKit, die beide Syntaxen so leicht zugänglich machen, was sind Ihre Gründe, eine der beiden zu verwenden?