LESS ist ein freundlicher, leicht zugänglicher CSS-Präprozessor. Obwohl Sass und Stylus letztendlich leistungsfähiger und robuster sind, hat LESS einen gewissen Charme, der es als Vorreiter im Kampf der Vorprozessoren bewahrt.
Wenn Sie ein Sass-Fan sind, können Sie Compass nutzen, ein unglaubliches Framework, das das Codieren mit komplexen CSS3-Eigenschaften zum Kinderspiel macht. Aber was ist mit weniger Benutzern? Wo ist ihr Kompass? Heute werden wir uns drei großartige Mixin-Bibliotheken anschauen, die dazu beitragen werden, diese Lücke zu füllen.
Was ist der Deal mit WENIGER?
Wenn Sie zu den CSS-Codierern gehören, die sich immer noch im Außenbereich befinden und CSS-Präprozessoren betrachten, aber nicht wissen, ob Sie fähig sind, einen zu verwenden, ist LESS ein guter Ausgangspunkt.
Das erste, was zu beachten ist, ist, dass Präprozessoren tatsächlich die Codierung vornehmen einfacher, auch wenn sie auf den ersten Blick wie eine große Komplikation erscheinen. Um zu beginnen, rufen Sie die LESS-Website auf und laden Sie less.js.
Erstellen Sie nun ein .less-Stylesheet (genau wie ein .css-Stylesheet, nur mit einer anderen Erweiterung) und legen Sie es wie jedes andere Stylesheet in Ihren HTML-Code ab. Stellen Sie außerdem sicher, dass Sie die JavaScript-Datei einfügen.
Die JavaScript-Datei sorgt automatisch dafür, dass Ihr LESS-Code in CSS umgewandelt wird, das der Browser lesen kann.Das ist es! Das war schmerzlos, richtig? Gehen Sie nun weiter und schreiben Sie CSS, wie Sie es immer in dieser .less-Datei tun würden, und beginnen Sie nach und nach mit tollen LESS-Features wie Variablen und Mixins zu spielen. Die JavaScript-Datei sorgt automatisch dafür, dass Ihr LESS-Code in CSS umgewandelt wird, das der Browser lesen kann.
Die Sache, die Sie sich merken sollten, ist, dass die Datei less.js zu Testzwecken dient. Wenn Sie bereit sind, diesen Trottel live zu nehmen, legen Sie Ihre .less-Datei in Less.app oder einem gleichwertigen Element ab und spucken eine einfache alte CSS-Datei aus. Diese Vanille-CSS-Datei sollten Sie in Ihrem endgültigen Entwurf verwenden.
Behalten Sie Ihre LESS-Dateien bei. Wenn Sie sie jedoch aktualisieren, aktualisiert Less.app auch Ihre CSS-Datei. Es ist wirklich ein sehr einfacher Workflow. Probieren Sie es aus, es ist viel einfacher als Sie denken.
Was ist mit Sass?
Wenn Sie ein Sass-Benutzer sind, herzlichen Glückwunsch, ich auch. Allerdings ist dieser Beitrag nicht dazu gedacht, eine Debatte zwischen LESS und Sass zu sein. Klopfen Sie sich einfach auf den Rücken und machen Sie weiter, anstatt mir eine Menge Anti-LESS-Kommentare zu hinterlassen.
WENIGER Mixins
Eine der besten Funktionen eines CSS-Präprozessors ist die Möglichkeit, Mixins zu erstellen, mit denen Sie eine Reihe von Eigenschaften und anpassbaren Werten in einem kleinen Paket zusammenfassen können.
Hier ist ein Beispiel:
Dadurch wird der gesamte Box-Shadow-Code in einem einzigen Mixin zusammengefasst, der mit benutzerdefinierten Werten (oder den oben verwendeten Standardwerten) implementiert werden kann. Jetzt müssen Sie nicht jedes Mal, wenn Sie einen Box-Schatten wollen, einen großen Code-Code schreiben, sondern alles, was Sie brauchen:
Ziemlich toll, richtig? Wenn dieser Code kompiliert wird, wird er als einfaches altes CSS ausgegeben. Sie erhalten eine deutlich lesbarere und einfach zu aktualisierende Codebasis, ohne die Browserkompatibilität zu beeinträchtigen.
Sparen Sie Zeit mit Mixin-Bibliotheken
Wie Sie sich vorstellen können, gibt es eine Unmenge möglicher Mixins, von denen fast jeder CSS-Codierer profitieren könnte. CSS3 ist voll von aufgeblähtem, redundantem, mit Präfixen gefülltem Code, der geradezu mühsam zu schreiben ist. Ein paar vorgefertigte Mixins für all diesen Blödsinn könnten Ihnen beim Erstellen von Websites eine Menge Zeit und Ärger ersparen.
? CSS3 ist voll von aufgeblähtem, redundantem, mit Präfixen gefülltem Code, der geradezu mühsam zu schreiben ist.Glücklicherweise gibt es viele Leute in der Webentwicklungs-Community, die an einem solchen Projekt gearbeitet haben. Wie ich bereits im Intro erwähnt habe, ist Compass die ultimative Ressource für Sass-Benutzer, aber nur weil es keine Version von Compass for LESS gibt, heißt das nicht, dass Sie es nicht auslassen müssen. Es gibt einige wirklich großartige WENIGER Mixin-Bibliotheken, die nur darauf warten, dass Sie an Bord springen. Schauen wir uns ein paar an.
WENIGER Elemente
LESS Elements war eine der ersten soliden LESS-Mixin-Bibliotheken, auf die ich gestoßen bin. In Wahrheit ist es ziemlich einfach, aber es ist ein anständiger Ausgangspunkt:
Mitgelieferte Mixins
LESS Elements enthält fünfzehn vorgefertigte Mixins (wiederum sehr einfach). Folgendes ist enthalten:
- .Gradient
- .bw-Gradient
- .grenzen
- . Drop-Schatten
- .gerundet
- Grenzradius
- .Opazität
- .Übergangszeit
- .Drehung
- .Rahmen
- .Übergang
- .inneren Schatten
- .Box Schatten
- .Säulen
- .Übersetzen
Wie Sie sehen, werden hier viele Ihrer üblichen CSS3-Komplexitäten behandelt: Farbverläufe, Schatten und sogar Übergänge.
Syntax
Die Syntax hier ist ziemlich einfach, sie folgen alle den Konventionen der normalen CSS-Eigenschaften. Wie bei allen LESS-Mixins werden sie über die Periodensyntax implementiert, sodass es sich anfühlt, als würden Sie eine Klasse in einer Klasse verschachteln.
Kritik
LESS Elements war ein großartiges Projekt mit viel Potenzial, das dieses Potenzial jedoch nie wirklich erkannt hat. Wenn Sie, wie ich, tatsächlich an die erstaunliche Kombination von Sass und Compass gewöhnt sind, fühlt sich LESS Elements im Vergleich dazu winzig an. Das ist einfach so viel ist nicht Hier ist es schwierig, sich über das, was ist, zu freuen.
Es gibt einfach so viel ist nicht Hier ist es schwer, sich für was zu interessieren.Trotzdem gibt es eine Unmenge von Programmierern, die die Einfachheit bevorzugen und die zusätzlichen Flusen nicht wirklich brauchen.
Abgesehen von der Tatsache, dass LESS Elements so grundlegend ist, liegt die unglückliche Wahrheit, dass sie, soweit ich das beurteilen kann, seit einem Jahr nicht berührt wurde. Da sich CSS immer noch weiterentwickelt, da neue Funktionen implementiert werden und ältere Funktionen endlich den Browser-Status erreichen, besteht die Gefahr, dass der Workflow auf einem Tool basiert, das selbst stagniert.
Letztendlich gab es hier großartige Arbeit, aber ich denke, wir können es besser machen.
WENIGER Hut
Die erstaunlichen Leute, die uns CSS Hat gebracht haben, haben gerade LESS Hat eine fantastische und moderne LESS Mixin-Bibliothek veröffentlicht. Nachdem sie sich umgesehen hatten, fanden sie keine gute Quelle für LESS-Mixins, also machten sie ihre eigene!
Mitgelieferte Mixins
LESS Hat enthält neunzehn Mixins, mit Keyframes (dem zwanzigsten) auf dem Weg. Wie Sie sehen, deckt es so ziemlich alles ab, was wir in LESS Elements und mehr gesehen haben:
- .Animation
- .keyframes (bald verfügbar)
- .Aussehen
- .sichtbarkeit
- .background-clip
- .hintergrund-herkunft
- .hintergrundgröße
- Grenzradius
- .Border-Bild
- .Box Schatten
- .box-dimensionierung
- .Säulen
- .Schriftart
- .Gradient
- .Opazität
- .Perspektive
- .Größe
- .verwandeln
- .Übergang
- .benutzer auswählen
Sie sind so stolz auf ihre Funktionen, dass sie keine Angst haben, sie mit LESS Elements und sogar mit Compass zu vergleichen.
Wie Sie sehen können, ist LESS Hat so ziemlich die Knie der Bienen. Zu den Stärken, die Sie lieben werden, gehören die Möglichkeit, mehrere Farbverläufe zu implementieren, ohne sich um ältere Syntax zu kümmern, unbegrenzte Box-Schatten, 3D-Transformationen und sogar @ font-face-Unterstützung.
Syntax
Die Syntax für LESS Hat ist eigentlich etwas skurril. Sie werden dies besonders bei allen Eigenschaften feststellen, bei denen Sie mehrere Instanzen einer Eigenschaft implementieren können, z. B. mit mehreren Box-Shadows.
Wie Sie sehen, stehen Ihnen neben der typischen Klammer-Syntax auch Anführungszeichen und das Symbol ~ zur Verfügung. Was ist denn hier los?
Die Antwort ist ziemlich kompliziert. Es läuft darauf hinaus, dass LESS selbst nicht so gut mit der Syntax für das Einfügen mehrerer Eigenschaftsinstanzen spielt. Um damit umzugehen, nehmen sie die Eingabe als Escape-Zeichenfolge und analysieren sie dann in jedem Mixin. Mehr dazu erfahren Sie hier.
Kritik
LESS Hat ist eine der besten LESS-Ressourcen von Drittanbietern, die ich bisher gesehen habe. Hier wurde viel Mühe gegeben und das Ergebnis ist wirklich etwas Großartiges. Wenn die Leute von CSS Hat mithalten, könnte dies für LESS-Nutzer ein Muss werden.
Die Kritiken hier sind weitgehend bereits angesprochen worden. Es wäre schön, Keyframe-Unterstützung zu sehen, aber das soll bald kommen, also wird dies kein langfristiges Problem sein. Die Syntax reduziert die benutzerfreundliche Natur von LESS, aber es scheint ein notwendiges Übel zu sein, wenn Sie die Art von Feature-Set wünschen, die LESS Hat bietet.
Twitter Bootstrap und Preboot
Twitter Bootstrap ist ein äußerst beliebtes Front-End-Framework, das aus der beeindruckenden Arbeit des Twitter-Entwicklers Mark Otto hervorgegangen ist. Im Kern ist Bootstrap auf einer LESS-Basis aufgebaut und wird nicht auf reinem CSS betrieben.
Angesichts der Tatsache, dass Bootstrap ein so erstaunliches und unglaublich umfangreiches Tool-Set ist, ist es eine der beeindruckendsten Sammlungen von LESS-Ressourcen, die jemals gebaut wurden.
Was ist mit Preboot?
In der Vergangenheit arbeitete Mark Otto an einem Projekt namens Preboot.less, einer Sammlung von LESS-Mixins. Dieses Projekt hat sich weiterentwickelt und wurde in Bootstrap integriert, aber schauen Sie stattdessen dort nach (Mark hat für mich bestätigt, dass Preboot jetzt ein stagnierendes Projekt ist).
Bootstrap & WENIGER
Sie möchten weniger Dateien? Du hast sie. Bootstrap wird derzeit mit sage und schreibe vierzig .less-Dateien geliefert, die alle seine verschiedenen Aspekte und Funktionen steuern.
Wenn Sie nach etwas suchen, das wirklich mit der Tiefe und Breite von Compass übereinstimmt, ist Bootstrap Ihre Antwort. Wenn wir streng mit den beiden vorherigen Bibliotheken vergleichen, die wir zuvor verwendet haben, möchten wir uns die Datei mixins.less ansehen. Hier finden Sie Mixins für Farbverläufe, Deckkraft, Schatten, Clear-Fix, das Rastersystem und vieles mehr. Wenn Sie nach etwas suchen, das mit der Tiefe und Breite von Compass wirklich vergleichbar ist, ist Bootstrap Ihre Antwort.
Kritik
Wie Sie an meinen vorherigen Beiträgen erkennen können, bin ich ein großer Bootstrap-Fan. Es ist eine wirklich solide Ressource und eine großartige Möglichkeit für Twitter, einen Beitrag zur Entwicklergemeinschaft zu leisten.
? Alle diese großartigen Mixins sind in Bootstrap enthalten, aber soweit ich das beurteilen kann, werden sie in der aktuellen Dokumentation nicht wirklich angezeigt.?Meine Hauptsache ist hier, dass alle diese großartigen Mixes in Bootstrap enthalten sind, aber soweit ich das beurteilen kann, erscheinen sie in der aktuellen Dokumentation nicht wirklich. Wenn ja, kann ich sie sicher nicht finden, was immer noch eine Hauptbeschwerde ist.
Andere Ressourcen wie LESS Hat, LESS Elements und Compass listen alle enthaltenen Mixins mit Beispielen für Syntax, Implementierungscode und endgültige Ausgabe auf. So etwas brauchen wir für die Bootstrap-Mixins. Vielleicht sind sie wirklich nur für die eigentlichen Elemente der Bootstrap-Benutzeroberfläche gedacht, aber wo ist der Spaß dabei?
Welches ist das Beste?
Ich denke, es ist ziemlich offensichtlich, dass LESS Hat und Bootstrap beide die Hose von LESS Elements kicken, aber zwischen den beiden, was ist das Beste? Die Antwort hängt natürlich davon ab, was Sie brauchen.
Bootstrap ist keine Liste von Mixins, es ist ein riesiges Framework mit vielen Ressourcen.Wenn Sie nur nach einer Handvoll Mixins suchen, können Sie immer Bootstrap herunterladen und sich die mixins.less-Datei holen, aber selbst das könnte für Ihre Anforderungen etwas schwer sein.
Im Gegensatz dazu hat LESS Hat einen viel kleineren Footprint und möchte kein umfassender Rahmen sein. Es hat die weniger Mixins, die Sie brauchen und sonst nichts.
Fazit: Wenn Sie die Art und Weise, wie Sie Websites erstellen, völlig neu definieren und systematisieren möchten, sollten Sie Bootstrap ausprobieren. Wenn Sie jedoch nur ein WENIGER-Benutzer sind, der nach Mixen sucht, empfehle ich auf jeden Fall den LESS-Hut.
Wenn Sie LESS weniger Benutzer sind, verwenden Sie Mixin-Bibliotheken? Lass es uns in den Kommentaren wissen.