Share
Die Welt der Front-End-Webentwicklung hat ihre Akzeptanz für sogenannte CSS-Preprozessoren, die die Funktionalität von regulärem CSS erweitern, stetig gesteigert. Die beiden bekanntesten mit der größten Nutzerbasis sind LESS und Sass / SCSS. Es gibt jedoch einen dritten Präprozessor, der nicht so viel Aufmerksamkeit gefunden hat, und das ist Stylus.
Heute werden wir diskutieren, warum Stylus so großartig ist, warum ich ihn wähle und warum er gerade zu Ihrem neuen CSS-Helden werden könnte.
Bevor wir uns näher mit der Funktionsweise von Stylus beschäftigen, beginne ich mit meiner eigenen Einstellung zu den vorherrschenden Stärken von LESS und Sass / SCSS und warum ich keine der beiden wähle, auch wenn beide rocken.
Jeder der drei Vorprozessoren umfasst die Verwendung von Variablen, Mixins, Verschachteln und Erweitern sowie unterschiedliche logische Operationen und Funktionen. Daher sind alle drei gleich, da Sie damit die wichtigsten Gestaltungselemente abstrahieren, Logik verwenden und weniger Code schreiben können. Dadurch können Sie bei guter Verwendung einen großen Gewinn gegenüber Raw-CSS erzielen.
Da jedoch alle drei in diesem grundlegenden Sinn gleich sind, werden letztendlich die verschiedenen Arten dazu führen, dass Sie sich entscheiden.
Für mich ist die größte Stärke außerhalb der Aspekte, die allen drei Vorprozessoren gemeinsam sind, die Community um LESS und die von ihnen geschaffenen Angebote.
Das bekannteste Projekt mit LESS ist das Twitter-Bootstrap-Framework. Ich schätze, der Wunsch, damit zu arbeiten, ist ein großer Teil dessen, was viele Leute wiederum zu LESS führen.
Eine weitere Besonderheit ist die LESShat-Mixin-Bibliothek, die ein hervorragendes Array von Mixins für CSS3-Effekte und mehr bietet, und ihr Partner, das CSShat-Plugin für Photoshop, das aus PSD-Elementen LESS-Code für das Kopieren und Einfügen generiert. Insbesondere diese beiden Elemente in Tandem erzeugen einen sehr leistungsfähigen Workflow, der fantastisch ist, wenn Sie einen großen Teil Ihres Designprozesses in Photoshop durchführen.
Ein weiterer großer Vorteil für LESS ist die Tatsache, dass es für die meisten Menschen durchaus zugänglich ist. Sie können eine einfache JavaScript-Datei verwenden, um sie schnell zu kompilieren, Sie können eine IDE mit integrierter Kompilierung wie CrunchApp (oder nur CodeKit auf Mac) oder Node.js auf Ihrem lokalen Computer verwenden, um eine robustere / flexible kompilierlösung.
Ich bevorzuge immer meinen eigenen Code gegenüber Frameworks von Drittanbietern, und ich neige auch dazu, heutzutage ein minimales Photoshop-Design zu machen, und ich ziehe es vor, so dynamisch wie möglich im Browser zu entwerfen. (CSSHat kann auch in mehreren Sprachen ausgeben). Für mich sind die Projekte, die ich beschrieben habe, nicht groß genug, um mich zu zwingen, LESS als meinen bevorzugten Präprozessor zu wählen.
Der Hauptgrund, aus dem ich LESS nicht verwende, ist der wesentliche Unterschied zwischen den verfügbaren logischen Verarbeitungsfunktionen und den beiden anderen großen Präprozessoren.
Je weniger logikbasierte Funktionen verfügbar sind, desto weniger können wir minimalen, sauberen Code erstellen, und die Entwicklung und spätere Modifizierung wird langsamer.
WENIGER erlaubt zwar etwas Logik, ist aber im Vergleich zu Stylus und Sass / SCSS sehr einschränkend. Sie werden in meiner Beschreibung sehen, was an Sass so großartig ist.
Sass hat auch eine großartige Community mit vielen großartigen Projekten. Wo LESS Twitter Bootstrap hat, hat Sass Frameworks wie Gumby und Foundation. Wo LESS weniger hat, hat Sass Bibliotheken wie Compass und Bourbon.
Wo es jedoch im Vergleich zu LESS wirklich zur Geltung kommt, ist seine mächtige Fähigkeit, mit Logik umzugehen. Wo weniger als verbessertes CSS bezeichnet wird, verhält sich Sass eher wie eine vollständige Programmiersprache.
Mit Sass können Sie zum Beispiel effizient schriftliche Bedingungsprüfungen erstellen, was besonders bei Mixins hilfreich ist.
In Sass können Sie Folgendes tun:
@mixin border_and_bg ($ border_on, $ border_color, $ bg_on, $ bg_color) @if $ border_on == true border: 1px festes $ border_color; @else border: 0; @if $ bg_on == true Hintergrundfarbe: $ bg_color; @else Hintergrundfarbe: transparent;
Dieses Mixin prüft, ob $ border_on ist eingestellt auf wahr, und wenn ja, benutzt es das $ border_color Wert in der Ausgabe für die Rand Eigentum. Wenn nicht, wird auf die Einstellung von zurückgegriffen Rand Eigentum an 0.
Sie prüft dann auch, ob $ bg_on ist eingestellt auf wahr, und wenn ja, benutzt es das $ bg_color Wert in der Ausgabe für die Hintergrundfarbe Eigentum. Wenn nicht, wird das festgelegt Hintergrundfarbe Eigentum an transparent
Dies bedeutet, dass abhängig von den übergebenen Werten bis zu vier verschiedene Arten von Ausgaben aus einem einzigen Mixin erzeugt werden können, d. H. Rand und Hintergrund sowohl an, Rand und Hintergrund sowohl aus als auch Rand an und Hintergrund aus, Rand aus und Hintergrund ein.
In LESS gibt es jedoch keine "if / else" -Prüfungen, so dass dies nicht möglich wäre. Mit LESS können Sie meistens so genannte "Guarded Mixins" verwenden, bei denen ein bestimmtes Mixin aufgrund einer Überprüfung eines einzelnen Ausdrucks unterschiedlich ausgegeben wird.
Ihr Mixin könnte also prüfen, ob die @grenzt an Parameter wurde auf gesetzt wahr wie so:
.border_and_bg (@border_on, @border_color, @bg_on, @bg_color) when (@border_on = true) border: 1px festes @border_color;
Da jedoch die Funktion "if / else" fehlt, kann er den Wert von auch nicht überprüfen @bg_on, noch einen alternativen Wert für das geben Rand Eigenschaft innerhalb der gleichen Mischung.
Um die gleiche Logik zu erreichen, die mit einem einzigen Sass-Mixin behandelt wurde, müssen Sie vier verschiedene gesicherte Mixins mit LESS erstellen, d. H. Eines für jede der möglichen Kombinationen von @grenzt an und @bg_on Werte wie folgt:
.border_and_bg (@border_on, @border_color, @bg_on, @bg_color) when (@border_on = true) und (@bg_on = true) border: 1px solid $ border_color; Hintergrundfarbe: @bg_color; .border_and_bg (@border_on, @border_color, @bg_on, @bg_color) when (@border_on = false) und (@bg_on = false) border: 0; Hintergrundfarbe: transparent; .border_and_bg (@border_on, @border_color, @bg_on, @bg_color) wenn (@border_on = false) und (@bg_on = true) border: 0; Hintergrundfarbe: @bg_color; .border_and_bg (@border_on, @border_color, @bg_on, @bg_color) when (@border_on = true) und (@bg_on = false) border: 1px solid @border_color; Hintergrundfarbe: transparent;
Und das ist nur mit zwei zu überprüfenden Werten; Die Anzahl steigt mit jedem Wert, für den Sie Logik ausführen möchten. Dies kann sehr unhandlich werden, wenn Sie komplexere Mixins erstellen möchten. Es ist auch ein mühsamer Prozess, alle möglichen Permutationen von Variablenkombinationen zu berücksichtigen, um alle zu berücksichtigen.
Dies ist nur ein Beispiel, wo verbesserte Logik das Leben mit Sass vs. LESS wesentlich einfacher macht, aber es gibt noch viele mehr. Insbesondere bietet Sass durch seine hervorragende Iterationsfähigkeiten @zum, @jeder und @während richtlinien.
Und zu guter Letzt, während LESS einige ausgezeichnete integrierte Funktionen hat, macht es Sass sehr einfach, eigene Funktionen zu schreiben. Sie werden einfach geschrieben als:
@ function Funktionsname ($ parameter) @return $ dosomething + $ parameter / $ somethingelse;
Diese logischen Funktionen eröffnen eine Welt der Möglichkeiten für das Erstellen eigener Layout-Engines, die Handhabung von Pix-to-Em, Farbmodifizierer und Tastenkombinationen für eine unendliche Anzahl von Dingen, die Sie von Projekt zu Projekt benötigen.
Nach allem, was ich gelesen und gehört habe, haben Leute darüber gesprochen, und aus meiner eigenen Erfahrung heraus ist diese stark verbesserte logische Kraft der Haupttreiber für Menschen, die sich für Sass statt für LESS entscheiden.
Da LESS aufgrund der begrenzten logischen Operationen für die meisten Projekte ausgeschlossen ist, kann zwischen Sass und Stylus gewählt werden, die beide über eine Reihe leistungsstarker Funktionen verfügen.
Und zwischen den beiden wähle ich Stylus. Der Stift hat die Macht von Sass, mit der Zugänglichkeit von LESS.
Stylus.js macht alles, was ich brauche, was Sass tut, aber es erfordert nur JavaScript oder Node.js zum Kompilieren. Außerdem verfügt es über eine besondere Art der Bedienung, die reibungslos und einfach zu handhaben ist, und es hat eine schöne, saubere Syntax, die ich bevorzuge.
Für mich ist das Erfordernis, Ruby on Rails zu betreiben und mit Edelsteinen umzugehen, eine wichtige Blockade für die Zusammenarbeit mit Sass. Ruby gehört zu keinem der Projekte, die ich entwickle. Deshalb muss ich mich nur mit der Installation von Juwelen beschäftigen. Edelsteine müssen nur mit Sass umgehen. Das sind eine Reihe von Verbindungsfehlern und Installationsproblemen, die ich nicht benötige, wenn ich es vermeiden kann.
Ich vermute, dass viele andere Leute im selben Boot sind, weil sie Ruby nicht anderweitig verwenden und nicht unbedingt einen CSS-Präprozessor verwenden wollen.
Auch wenn ich Ruby installieren muss, um Sass verwenden zu können, muss ich trotzdem mit Node.js und NPM arbeiten, um Grunt für andere Aspekte meiner Projekte zu nutzen, z. B. das Suchen nach Änderungen, das Kombinieren und Minimieren JavaScript und so weiter, sowie Bower für andere Paketverwaltung.
Hinweis: Es gibt ein Programm namens Scout für Mac und Windows, das die Kompilierung für Sie übernehmen wird. Wo immer möglich, verzichte ich darauf, etwas nur für einen bestimmten Zweck zu installieren, anstatt mit Tools zu arbeiten, die ich für mehrere Zwecke verwenden kann. Es gibt auch CodeKit, aber das ist nur Mac.
Wenn es also einen Präprozessor wie Stylus gibt, der über alle logischen Möglichkeiten verfügt, die ich brauche, aber problemlos mit meiner bevorzugten IDE und dem vorhandenen Node.js-Setup oder mit reinem JavaScript verwendet werden kann, ist die Auswahl einfach sinnvoll.
Viele Leute finden den Einrichtungsprozess für Sass wegen des Ruby-Faktors einschüchternd und entscheiden sich aus diesem Grund für LESS. Ich finde jedoch, dass die einfache Einrichtung für Stylus im Wesentlichen mit LESS vergleichbar ist und mir gleichzeitig die volle Bandbreite logischer Funktionen bietet.
Aber es geht nicht nur um Ruby oder auch nur um die verfügbaren logischen Funktionen. Es geht auch um die spezifische Funktionsweise von Stylus und die verwendete Syntax, die ich im Vergleich zu LESS und Sass als unglaublich sauber, flexibel und glatt empfinde.
Nun möchte ich Ihnen sagen, warum ich Stylus wähle und warum es Ihr neuer CSS-Held sein könnte.
Wenn ich oben angesprochen habe, wähle ich Stylus für seine:
Um Ihnen wirklich zu zeigen, warum ich mich für Stylus entschieden habe, müssen wir erst einmal ein wenig anfangen, es zu verwenden, damit ich Ihnen genau zeigen kann, worüber ich spreche.
Beginnen wir mit der größten Hürde, auf die die Leute mit CSS-Präprozessoren stoßen.
Ich wähle Stylus vor allem deshalb, weil ich es als Teil meiner regulären Projekterstellungsmethoden einrichten kann und dadurch meine bevorzugte IDE verwenden kann. Lass mich dir zeigen wie.
Ja, es gibt einige Befehlszeilenprozesse, die jedoch von jemandem übernommen wurden, der noch nie eine Befehlszeile verwendet hatte, bevor der Vorprozessor es erfordert hatte - es ist bei weitem nicht so schwierig, wie Sie denken, und die Verwendung der Befehlszeile gibt Ihnen das Gefühl zehn Prozent klüger als zuvor. :)
Das heißt, ich habe ein Paket zusammengestellt, das Sie durch Klicken auf die Schaltfläche "Download" oben in diesem Artikel packen können, was bedeutet, dass Sie unter Windows kaum über die Befehlszeile nachdenken müssen. Nur ein paar Doppelklicks und schon kann es losgehen.
Wenn Sie mit Mac oder Linux arbeiten, müssen Sie keine Angst haben, da Sie nur drei Befehle ausführen müssen, um das Paket zu verwenden. Ich werde Sie durch die einzelnen Schritte führen und sie sind sehr einfach.
In diesem Paket werden Ihre Quell-Stylus-Dateien auf Änderungen überprüft und für Sie in CSS-Dateien kompiliert. Sie können es mit jeder beliebigen IDE verwenden, was ein großer Vorteil dieses Ansatzes ist.
Für mich persönlich ist es der episch beeindruckende Sublime Text 2. Es ist auch die IDE, die ich für die Verwendung mit Stylus aufgrund des hervorragenden Stylus-Syntax-Highlight-Pakets empfehle, das für ihn verfügbar ist.
Node.js ist heutzutage ein absolutes Muss für die Front-End-Webentwicklung. Es gibt so viele erstaunliche Tools, die darüber hinaus funktionieren. Durch die Installation werden Sie nicht nur für Stylus, sondern auch für viele andere Dinge eingesetzt.
Gehen Sie zu http://nodejs.org/download/ und laden Sie das Installationsprogramm für Ihr Betriebssystem herunter.
Führen Sie das Installationsprogramm wie jedes andere aus, um Node.js auf Ihrem System zu speichern.
Grunt ist ein unglaubliches Werkzeug zum Ausführen von JavaScript-Aufgaben. Sie können es für über zweitausend verschiedene Zwecke über die hier aufgeführten Plugins verwenden: http://gruntjs.com/plugins
In unserem Fall verwenden wir es, um unsere Stylus-Dateien zu überwachen und bei jeder Änderung in CSS zu kompilieren.
Bereiten Sie sich auf den ersten Eindruck der Befehlszeile vor, öffnen Sie ein Befehlsfenster / Terminal.
Unter Windows finde ich die einfachste Möglichkeit, einfach den Windows Explorer zu öffnen. Halten Sie in einem beliebigen Ordner die UMSCHALTTASTE gedrückt und klicken Sie mit der rechten Maustaste. Im Kontextmenü sehen Sie dann "Befehlsfenster hier öffnen", auf das Sie klicken sollten:
Alternativ können Sie auf die Schaltfläche "Start" klicken, dann nach "cmd" suchen und die EINGABETASTE drücken, um das Befehlsfenster zu öffnen.
Wenn Sie mit Linux arbeiten, wissen Sie wahrscheinlich bereits, wie Sie ein Terminal öffnen. Wenn nicht, finden Sie hier eine Anleitung, wie Sie die verschiedenen Distributionen aufrufen können: https://help.ubuntu.com/community/UsingTheTerminal
Wenn Sie mit einem Mac arbeiten, werfen Sie einen Blick auf die Einführung in die Befehlszeile von A Designer.
Geben Sie nun den folgenden Befehl ein und drücken Sie die EINGABETASTE:
npm install -g grunt-cli
Es erscheint eine Ladung Text wie dieser im Fenster:
Warten Sie, bis alles abgeschlossen ist und eine neue Eingabeaufforderung angezeigt wird. Dies bedeutet, dass die Installation abgeschlossen ist und Sie das Befehlsfenster / Terminal schließen können. Sie müssen dies nur einmal durchführen, da Grunt auf Ihrem System mit globalem Zugriff installiert wird, sodass Sie es von jedem zukünftigen Projektordner aus verwenden können, den Sie einrichten.
Jetzt können Sie ein aktuelles Projekt mit dem von mir bereitgestellten StylusCompiler-Paket einrichten. Dies ist der Vorgang, den Sie für jedes neue Konstruktionsprojekt, das Sie beginnen, wiederholen.
Lassen Sie uns dies Schritt für Schritt machen.
Erstellen Sie einen Ordner für Ihr Projekt. Für diese Demo nennen wir es einfach EGProject.
Erstellen Sie darin einen zweiten Ordner mit dem Namen css. In diesen Ordner werden Ihre CSS-Dateien geschrieben.
Jetzt extrahieren Sie die StylusCompiler.zip Datei in diesen Ordner.
Sie sollten mit einer Struktur enden, die folgendermaßen aussieht:
Geh in die StylusCompiler Ordner und doppelklicken Sie unter Windows auf die Datei mit dem Namen double_click_to_install.bat.
Wenn Sie nicht unter Windows sind, öffnen Sie ein Terminal im StylusCompiler Ordner (oder öffnen Sie ein Terminal und navigieren Sie dann mit / cd zum Ordner). Geben Sie Folgendes ein und drücken Sie die Eingabetaste:
npm installierenDadurch wird der Compiler in Ihrem Projektordner installiert. Wieder sieht man ein paar Dinge wie diese im Fenster:
Wenn Sie sich unter Windows befinden und auf die .bat-Datei doppelklicken, wird das Fenster geschlossen, sobald die Installation abgeschlossen ist. Wenn nicht, warten Sie, bis sich der Text nicht mehr bewegt und eine neue Eingabeaufforderung angezeigt wird. Halten Sie Ihr Terminal für den nächsten Schritt offen. Jetzt müssen Sie nur noch die "Watch" -Funktion starten, die das Projekt für die Verwendung über Grunt eingerichtet hat. Dies wird das sehen Stift Ordner in der StylusCompiler Ordner für Änderungen an einem beliebigen .styl Dateien darin.
Erstellen Sie einfach alle benötigten Stylus-Dateien Stift Ordner und du bist gut zu gehen. Hinweis: Alle Ihre Stylus-Dateien müssen die .styl Dateierweiterung. Wenn Änderungen in Dateien in diesem Ordner gespeichert werden, kompiliert das Paket Ihren Stylus-Code in CSS und schreibt ihn in eine Datei mit dem Namen style.css in dem css Ordner Ihres Projekts. Immer noch im StylusCompiler Wenn Sie unter Windows arbeiten, doppelklicken Sie auf die Datei mit dem Namen watch_and_compile.bat.
Wenn Sie nicht unter Windows sind und sich Ihr Terminal noch im Internet befindet StylusCompiler Geben Sie den folgenden Ordner ein und drücken Sie die Eingabetaste:
grunzen beobachten
Sie sollten dies im Befehlsfenster / Terminal sehen:
Wenn Sie jetzt Änderungen an einer Datei im speichern StylusCompiler> Stift Ordner (sofern Sie in Ihrem Code keine Fehler gemacht haben), werden Sie Folgendes sehen:
Wenn Sie mit den Stylus-Dateien fertig sind, schließen Sie einfach das Befehlsfenster / Terminal, oder wenn Sie einen anderen Befehl ausführen müssen, drücken Sie STRG + C, um die Task "watch" zu stoppen.
Einer der Gründe, warum ich mit dieser Art von Projekteinrichtung sehr gerne arbeite, ist die vollständige Kontrolle, sodass Sie Ihr Projekt nach Ihren Wünschen einrichten und jederzeit ändern können. Wenn Sie Dinge wie den Ausgabeordner für Ihre CSS ändern möchten, den Namen der Ausgabedatei, ob das CSS komprimiert ist oder nicht usw., können Sie dies in der genannten Datei tun Gruntfile.js in dem StylusCompiler Mappe.
Wir verwenden das Grunt-Contrib-Stylus-Plugin für Grunt, um die Kompilierung durchzuführen, sodass Sie hier einen Überblick über alle möglichen Konfigurationen erhalten können: https://github.com/gruntjs/grunt-contrib-stylus.
Hier sind jedoch die wichtigsten Optionen, die Sie wahrscheinlich möchten.
Stellen Sie das ein komprimieren Option zu wahr für die Produktion fertige minified CSS oder falsch für erweitertes CSS, während Sie sich noch in der Entwicklung befinden.
Der Standard-Dateiname, in den geschrieben wird, lautet "style.css". Wenn Sie möchten, dass die Datei einen anderen Namen erhält, ersetzen Sie "style.css" durch Ihre Auswahl in dieser Zeile.
Standardmäßig sucht der Compiler eine Ebene von der StylusCompiler Ordner und schreiben Sie in die css Ordner darin.
Wenn Sie möchten, dass Ihre CSS-Dateien an einem anderen Ort geschrieben werden, ändern Sie den Wert in dieser Zeile von '… / Css' zu Ihrem bevorzugten Ort.
Wie bereits erwähnt, können Sie Ihre Stylus-Dateien mit einer beliebigen IDE bearbeiten, da sie genauso kompiliert wird. Ich empfehle jedoch dringend, Sublime Text 2 zu verwenden, da das Paket zur Hervorhebung der Stylus-Syntax für die Arbeit mit Stylus eine Freude ist.
Sie können Sublime Text 2 hier herunterladen: http://www.sublimetext.com/2.
Besuchen Sie nach dem Herunterladen und Installieren diese Seite und befolgen Sie die Anweisungen zur Installation von "Package Control", dem brillanten Paketmanager für Sublime Text: https://sublime.wbond.net/installation#st2
Installieren Sie schließlich das Stylus-Syntax-Highlight-Paket. Öffnen Sie die Paketsteuerung, indem Sie wie folgt auf Voreinstellungen> Paketsteuerung gehen:
Klicken Sie in der angezeigten Liste auf die Option "Paket installieren" und warten Sie einige Sekunden, während eine Liste der verfügbaren Pakete abgerufen wird:
Geben Sie "Stift" in das Feld über der Liste der Pakete ein, um danach zu suchen. Klicken Sie dann auf das Ergebnis mit dem Titel "Stift", um es zu installieren:
Dieses Paket wird nun zum Lesen schwierig, normale CSS-Formatierung wie folgt:
… In einfach zu unterscheidenden Stylus-formatierten Code wie folgt:
Eines der Dinge, die ich an Stylus absolut liebe, ist die vollständige Flexibilität der Syntax.
Mit LESS muss der gesamte Code auf die gleiche Weise geschrieben werden wie reguläres CSS, d. H. Sie müssen geschweifte Klammern, Doppelpunkte und Semikolons auf dieselbe Weise einfügen wie in CSS.
Mit Sass / SCSS haben Sie die Wahl:
Der Stift dagegen ist absolut flexibel und Sie müssen keine Kompilierungsoptionen festlegen, um die Art und Weise zu handhaben, die Sie schreiben möchten.
Alle diese Beispiele werden in Stylus kompiliert, und die Syntaxansätze können in demselben Dokument zusammen verwendet werden:
Nur Stylus erlaubt das Auslassen aller dieser Syntaxelemente in unterschiedlichem Maße und die Kombination dieser Ansätze "on the fly", sodass Sie im Verlauf Ihres Projekts alles tun können, was Sie möchten.
Diese Funktionalität ist erstaunlich für die Entwicklung. Sie werden überrascht sein, wie viel mehr Ihr Fluss ist, wenn Sie alle Syntax "Satzzeichen" weglassen, die Sie können. Ihre Kodierung und Ihr Denkprozess werden sich so viel reibungsloser gestalten. Und mit der Syntax-Hervorhebung, die das zuvor installierte Paket bietet, werden Sie feststellen, dass Ihr Code genauso gut lesbar ist.
Gleichzeitig ist das Kompilieren jedoch sehr nachsichtig. Wenn Sie sich aus irgendeinem Grund dafür entscheiden, dass die reguläre CSS-Syntax einen Teil Ihres Dokuments besser organisiert macht, können Sie ihn jederzeit verwenden und jederzeit verwenden. Und wenn Sie hier oder dort versehentlich ein Semikolon verpassen, kümmert das niemanden.
Sie haben oben einige Beispiele gesehen, wie Variablen, Mixins, Bedingungsprüfungen und Funktionen in LESS und Sass aussehen. Meines Erachtens finde ich, dass der Stylus-Ansatz im Allgemeinen einfacher zu lesen, zu lesen und zu arbeiten ist.
In LESS müssen Variablen das vorangestellt werden @ Symbol. In Sass muss ihnen das vorangestellt werden $ Symbol. In Stylus muss einer Variablen jedoch überhaupt nichts vorangestellt werden.
Hinweis: Sie können optional die $ Symbol, wenn Sie es vorziehen, aber nicht @ Symbol, da dieses in Stylus für andere Zwecke reserviert ist.
Ebenso müssen Mixins, Bedingungsprüfungen und Funktionen nichts in Stylus vorangestellt werden.
In LESS muss ein Mixin auf dieselbe Weise geschrieben werden wie eine normale CSS-Klasse, und es gibt keine bedingten Prüfungen oder benutzerdefinierten Funktionen.
In Sass müssen Mixins mit vorangestellt werden @mixin und rief mit an @umfassen, Bedingte Prüfungen werden als geschrieben @ob und @sonst, und Funktionen müssen mit vorangestellt werden @Funktion und fügen Sie eine mit vorangestellte Zeile ein @Rückkehr.
Keiner dieser Dinge ist in Stylus erforderlich. Sie können ganz einfach wie in der regulären Sprache schreiben. Zum Beispiel haben wir vorher dieses Beispiel verwendet und Sass mixin und function:
@mixin border_and_bg ($ border_on, $ border_color, $ bg_on, $ bg_color) @if $ border_on == true border: 1px festes $ border_color; @else border: 0; @if $ bg_on == true Hintergrundfarbe: 1px festes $ bg_color; @else Hintergrundfarbe: transparent;
@ function Funktionsname ($ parameter) @return $ dosomething + $ parameter / $ somethingelse;
Dieses Mixin und diese Funktion würde so heißen:
.callem @include border_and_bg (true, # 000, true, #fff); Schriftgröße: Funktionsname (6);
In Stylus könnten diese wie folgt geschrieben und aufgerufen werden:
Dies ist für mich sehr ordentlich, leicht zu lesen und zu schreiben und entspricht dem Ziel des Präprozessors, Code sauber und minimal zu machen.
Denken Sie auch daran, dass in dem obigen Beispiel alle Syntax "Satzzeichen", die weggelassen werden können, weggelassen wurde. Es ist jedoch optional, wie viel davon in Ihrer Entwicklung weggelassen werden soll.
Zum Beispiel habe ich angerufen border_and_bg Mischen Sie nahtlos und schreiben Sie es im Wesentlichen auf die gleiche Weise wie eine normale CSS-Eigenschaft, ohne Klammern zwischen Parametern oder Kommas. Wenn Sie jedoch bevorzugen, können Sie beim Aufruf von Mixins Klammern und Kommas angeben. Es liegt ganz bei Ihnen.
Eines der besten Dinge bei der Arbeit mit Sass und LESS sind die Compass / Bourbon- und LESShat-Mixin-Bibliotheken. Dank Nib verpassen Sie jedoch nicht eine erstaunliche Bibliothek an Mixins mit Stylus.
Das "StylusCompiler" -Paket, das ich Ihnen zur Verfügung gestellt habe, wird automatisch installiert (dank Grunt-Contrib-Stift) und Nib in Ihr Projekt einschließen, so dass Sie keine weiteren Schritte unternehmen müssen, um es zu verwenden.
Nib stellt Mixins für alle erwarteten CSS3-Effekte bereit, von denen jeder nahtlos wie eine normale CSS-Eigenschaft aufgerufen werden kann. Es enthält auch eine beeindruckende Auswahl an Mixins für andere Funktionen wie Positionieren, Zurücksetzen / Normalisieren, Löschen, responsive Bilder und mehr.
Die vollständigen Dokumente finden Sie hier: http://visionmedia.github.io/nib/
Hinweis: Eine zweite Mixin-Bibliotheksoption für Stylus ist Axis.
Stylus verfügt über eine Reihe weiterer fantastischer Funktionen, die auf eine eigene, einzigartige und saubere Weise erstellt werden. Sie sollten sich die gesamte Menge hier ansehen: http://learnboost.github.io/stylus/
Es gibt jedoch ein Paar, das ich wirklich liebe.
Rest-Parameter ermöglichen es Ihnen, eine unbestimmte Anzahl von Werten an ein Mixin zu übergeben, ohne sie bei der Erstellung des Mixins explizit zuordnen zu müssen. Sie können einen bestimmten Wert herausziehen und den "Rest" dann mit übergeben args… und args. Zum Beispiel:
Manchmal wiederholen Sie einen bestimmten Wert ein paar Mal, jedoch nur innerhalb eines Stils. Wenn Sie also eine Variable deklarieren müssen, um sie zu halten, kann es zu übertrieben sein.
Mit der Eigenschaftssuchfunktion können Sie den Wert jeder Eigenschaft nachschlagen, die Sie im gleichen oder im übergeordneten Stil deklariert haben. Zum Beispiel:
Alles was Sie tun müssen, ist die @ Symbol vor der Eigenschaft, die Sie nachschlagen möchten. Der Stift sieht zuerst in demselben Stil aus, und wenn er keine Übereinstimmung findet, wird das übergeordnete Element überprüft und so lange gesprudelt, bis entweder eine Übereinstimmung gefunden wird oder der Dokumentstamm erreicht wird und "null" zurückgegeben wird..
Hoffentlich fühlen Sie sich jetzt bereit, Stylus einzurichten, wenn Sie sich vorher der Kommandozeile nicht sicher waren, und Sie sind neugierig genug, um zu untersuchen, ob Sie die Macht von Sass lieben, aber lieber mit Node.js als mit Ruby arbeiten. Und auch wenn keiner der beiden Aspekte für Sie besonders relevant ist, hoffe ich, dass Sie von den einzigartigen Ansätzen, die Stylus unternimmt, genug fasziniert sind, um es auf den Punkt zu bringen und mit ihm zu spielen.
Zum Abschluss möchte ich Ihnen eine Liste interessanter Stylus-Artikel für Sie zum Durchsehen geben, von denen einige oben erwähnt wurden, sowie einige Extras.
Genießen!
Accentsconagua