LESS ist ein erstaunliches kleines Werkzeug, das CSS um Variablen, Mixins, Operationen und verschachtelte Regeln erweitert. Dies bedeutet, dass Sie schlankeren Code sehr schnell schreiben können. Und mit dem jüngsten Anstieg komplexer CSS3-Eigenschaften haben wir einige auffällige Beispiele für Code, die definitiv etwas vereinfacht werden könnten.
Wir werden heute einen Blick auf die Verwendung der neuesten JavaScript-Implementierung von LESS werfen, um langwieriges CSS3-Markup zu vereinfachen. Eine der Schlüsselfunktionen, die wir uns ansehen werden, die ich anderswo nicht gesehen habe, ist der Umgang mit mehreren Variablen in Mixins. Es ist ziemlich einfach, kann aber verwirrend sein, wenn Sie es noch nie versucht haben.
Jeder kann LESS.js verwenden
Als ich LESS zum ersten Mal anschaute, schien es eine Menge Arbeit zu sein. Es gab all diese seltsamen Schritte zum Kompilieren und Ruby-Skripte, die letztendlich das Gefühl hatten, sie würden meinem Workflow mehr Zeit geben, anstatt ihn zu reduzieren.
Glücklicherweise wusste jemand, dass der gesamte Prozess mit JavaScript viel einfacher sein könnte. Die Implementierung von LESS ist jetzt so einfach wie das Einfügen von zwei Zeilen Code in Ihren HTML-Code, und alles wird automatisch im Browser kompiliert! Mal sehen, wie das funktioniert.
Fertig machen
Um sicherzustellen, dass Ihr LESS-Code korrekt kompiliert wird, werfen Sie den folgenden Code in den Kopf Ihres HTML-Codes.
Beachten Sie, dass das typische rel =? Stylesheet? wurde rel =? Stylesheet / weniger? und dass wir mit einer von Google gehosteten Version von LESS.js verlinkt sind.
Der nächste Schritt ist das Erstellen einer style.less-Datei. Dies kann beliebig benannt werden. Vergewissern Sie sich, dass die Erweiterung .less anstelle von .css verwendet wird, wie Sie es gewohnt sind.
Variablen deklarieren
Eine meiner Lieblingsfunktionen von LESS ist bei weitem die Möglichkeit, Variablen wie in den meisten gängigen Programmiersprachen zu verwenden. Dies macht es extrem einfach, globale Stile festzulegen, die an einem einzigen Ort geändert werden können, anstatt Ihren Code nach allen Instanzen dieses Stils zu durchsuchen.
Um zu sehen, wie dies auf einer praktischen Ebene zutrifft, stellen wir einige Farbvariablen ein. Stellen Sie sich vor, unsere Webseite wird eine primäre und eine sekundäre Farbe haben, die im gesamten Design wiederholt verwendet wird. Anstatt sich jedes Mal an den Farbcode zu erinnern, können wir diese einfach auf Variablen setzen.
Um eine Variable in LESS zu setzen, verwenden Sie das @ -Symbol:
Das ist es! Jedes Mal, wenn wir diese Farben in unserem Design verwenden möchten, verwenden wir einfach dasselbe CSS, das wir immer verwenden, aber fügen den Variablennamen anstelle des Farbcodes ein.
Jedes Mal, wenn wir die Farbe in der Variablendeklaration ändern, wird die Änderung automatisch überall im Rest des Codes übernommen, wo die Variable aufgerufen wird. Dies kann Sie definitiv viel Zeit sparen, wenn Sie Ihre Entwürfe optimieren.
Operationen
Wie bei JavaScript und jeder anderen Programmiersprache, mit der Sie vertraut sind, können Sie mit LESS Variablenoperationen ausführen. Dies kann Ihnen auf lange Sicht eine Menge Denkarbeit ersparen.
Angenommen, Sie möchten eine Box erstellen, die doppelt so breit wie groß ist. Sie können die Höhe in einer Variablen deklarieren und dann eine andere Variable setzen, die doppelt so groß ist.
Später würden Sie diese Variablen später verwenden, um die Höhe und Breite Ihrer Box festzulegen. Wenn Sie dann zurückgehen und boxHeight auf 400px ändern, wird boxWidth automatisch auf 800px gesetzt.
Mixins
Hier kommt CSS3 ins Spiel. Lassen Sie uns zunächst die grundlegende Syntax für eine zufällige CSS3-Eigenschaft betrachten, beispielsweise den Rahmenradius.
Wie Sie sehen, besteht der aktuelle Weg, um sicherzustellen, dass dies für die größte Anzahl von Browsern funktioniert, darin, alle verschiedenen browserspezifischen Versionen einzubeziehen. Oben haben wir verwendet Grenzradius in Verbindung mit -webkit-border-radius und -Moz-Grenze-Radius.
Jedes Mal, wenn wir abgerundete Ecken in unserem CSS implementieren möchten, müssen wir alle diese Versionen manuell auflisten. Ich sehe, wie Ihr Gehirn dahin tickt und ein Argument darüber formuliert, wie Sie diese Stile einfach in eine Klasse umwandeln könnten. Was aber, wenn Sie die Flexibilität haben wollten, den Grenzradius pro Element zu optimieren? Das Einrichten einer wiederverwendbaren CSS-Klasse ist eine gute Lösung, aber mit LESS können Sie diese Idee noch viel weiterbringen.
Mit LESS können Sie im Wesentlichen mehrere Variablen in eine einzige Klasse setzen, die dann an anderer Stelle in Ihren Code eingebettet werden kann. Um ein Mixin mit LESS einzurichten, verwenden Sie folgende Syntax:
Der obige Code legt eine Variable für den Radius fest und setzt ihn auf 12px, wirft sie in alle Versionen des Grenzradius und speichert alle diese Informationen in einer Klasse namens.
Wenn wir nun abgerundete Ecken auf ein Objekt anwenden möchten, werfen wir einfach die Klasse hinein.
Dies wird einen 12px-Eckenradius auf unser Box-Div anwenden, wobei alle entsprechenden proprietären Versionen verwendet werden.
Denken Sie daran, dass der 12px-Radius, den wir im Mixin einrichten, lediglich eine Vorgabe ist, die übergeben wird, wenn während des Aufrufs keine Parameter angegeben werden. Sie können diese Klasse abwechselnd einfügen und den Grenzradius schnell auf eine andere Zahl setzen.
In diesem Code werden immer noch alle verschiedenen Versionen des Randradius verwendet, jedoch werden automatisch 20px als Wert für den Radius eingefügt. Dies macht es extrem schnell, benutzerdefinierte Iterationen einer CSS3-Eigenschaft zu implementieren. Gehen wir tiefer in das Kaninchenloch hinein und sehen wir uns an, wie man dies mit komplizierteren Eigenschaften macht.
Mehrere variable Mixins
Der Grenzradius war ein einfaches Beispiel, da er nur einen einzigen Wert enthält, mit dem gearbeitet werden kann. Wie steht es jedoch mit komplizierteren Eigenschaften wie Box-Shadow?
Wie Sie oben sehen können, müssen wir hier vier verschiedene Variablen festlegen, damit diese über die drei Versionen hinweg einheitlich sind. Es mag kompliziert klingen, aber zum Glück funktioniert das grundsätzlich genauso wie in JavaScript. Um das Beispiel einfach zu halten, verwenden wir einfach den Standard-Box-Schatten, um zu sehen, wie das gemacht wird.
Hier setzen wir Variablen für den horizontalen und vertikalen Versatz sowie für den Unschärfekreis und die Schattenfarbe. Beachten Sie, dass diese Werte alle in einem einzigen Satz von Klammern stehen und durch Kommas getrennt sind. Dann schreiben wir es in die Klammern innerhalb der Klammern, genauso wie wir die obigen Zahlen gemacht haben, ohne Kommas, die die Werte voneinander trennen.
Nehmen wir an, wir wollten abgerundete Ecken, einen Box-Schatten und einen Übergang zu einem Element mit LESS und CSS anwenden. Der von Ihnen verwendete Code würde ungefähr wie folgt aussehen:
Dann wäre die Implementierung ähnlich dem nachstehenden Code.
Wie Sie sehen, haben wir die Variablen für Höhe, Breite und Farbe der Box angewendet und dann die roundCorners- und boxShadow-Klassen implementiert. Schließlich haben wir ein Hover-Ereignis erstellt, das die Hintergrundfarbe von der Primärfarbe in die Sekundärfarbe überführt hat.
Verschachtelte Regeln
Das obige Beispiel kann durch Verwendung der geschachtelten Regeln von LESS noch weiter vereinfacht werden. Sehen Sie sich an, wie wir alle Boxstile in den gleichen Satz von Klammern setzen können, und Sie müssen nicht jedes Mal die Div-ID eingeben.
Wie Sie sehen können, befinden sich alle Linkstile, Link-Hover-Stile und Absatzstile des Boxelements in demselben übergeordneten Element.
Kompilieren
Ich weiß, was Sie denken, das ist gut und schön, aber kann ich es wirklich gebrauchen? Lädt es langsamer als Standard-CSS? Welche Browser unterstützen das?
Es stellt sich heraus, dass all diese und ähnliche Fragen keine Rolle spielen. Die Idee hinter LESS ist die Beschleunigung und Vereinfachung Nur der Entwicklungsschritt. Dies bedeutet, dass das, was auf Ihrer endgültigen Website live geht, reines altes CSS sein sollte, nicht weniger.
Wenn Sie mit der Arbeit an Ihrer Site fertig sind, müssen Sie den LESS nur noch mit Ihrem Browser in CSS kompilieren. Öffnen Sie dazu einfach Ihre HTML-Datei in einem Browser und zeigen Sie das Quell-CSS an. Unabhängig davon, was Sie tatsächlich codiert haben, sehen Sie eine normale CSS-Struktur. Einfach kopieren und als CSS-Dokument einfügen und schon kann es losgehen.
Kompilieren mit LESS.app
Um es noch einfacher zu machen, können Sie den Kompilierungsprozess mit der kostenlosen Anwendung LESS vollständig automatisieren.
Alles, was Sie tun müssen, ist, in den Projektordner zu ziehen, der Ihre WENIGER Dateien enthält. das ist es! Es gibt keinen zweiten Schritt. Wenn Sie Ihre LESS-Dateien weiter anpassen und speichern, wird automatisch eine neue CSS-Datei erstellt.
Fazit
Zusammenfassend lässt sich sagen, dass LESS jetzt mit nur zwei Zeilen Code in Ihrem HTML-Code implementiert werden kann und die Art und Weise, wie Sie CSS schreiben, dramatisch verändern kann. Verbringen Sie ein paar Monate mit LESS und Sie erstellen und optimieren komplexe Stylesheets schneller als je zuvor.
Mit LESS können Sie Variablen erstellen, Operationen mit Variablen ausführen, Regeln verschachteln und komplizierte Mixins erstellen, um Ihr CSS3 zu vereinfachen.
Hinterlassen Sie einen Kommentar und lassen Sie uns wissen, was Sie von LESS halten. Halten Sie es für ein großartiges Werkzeug oder Zeitverschwendung? Wir wollen wissen!