Share
Less.CSS wird zu einem beliebten Werkzeug, um Stylesheets "dynamisch" zu machen. Ich arbeite bereits seit einiger Zeit mit der Integration von Less.CSS in WordPress. Daher werden wir uns heute ein kurzes Tutorial mit dem Einstieg und dem BluePrint CSS-Framework anschauen, um einen schnelleren Workflow in WordPress zu erreichen.
Ich weiß, was Sie denken, aber Leute, es bedeutet nicht, dass Sie nur weniger Code schreiben. Wie oft haben Sie an einem Projekt gearbeitet und wünschten, Sie könnten die Dinge vereinfachen, indem Sie eine Funktion in Ihre CSS-Datei einfügen, mithilfe von Variablen Farben oder andere Eigenschaften ändern oder andere programmtechnische Techniken anwenden? Mit Less CSS kann Ihr Wunsch Wirklichkeit werden.
Less ist ein CSS-Tool, mit dem Sie Ihre Entwicklung beschleunigen und vereinfachen können, indem Sie Variablen, Vererbung (über Mixins), Funktionen (Operationen) und mehr verwenden können. Kurz gesagt, mit Less CSS haben Sie die Möglichkeit, Programmiertechniken mit Ihrem CSS zu kombinieren. Genug geredet. Lass uns anfangen!
Weniger gibt es in zwei Hauptvarianten, eine kompilierte Version und eine JavaScript-basierte Version. Zum Zwecke unserer Diskussion werden wir uns auf das konzentrieren kompiliert Ausführung. Ich habe mich hauptsächlich für diese Version entschieden, weil es mir nicht gefällt, Dateien in meine Site aufzunehmen, die ich nicht muss. Jede Datei, die Ihre Site benötigt und attraktiv aussieht, bewirkt, dass die Site etwas langsamer geladen wird.
Es funktioniert also wie folgt: Sie besuchen den folgenden Link und laden die App für Mac herunter. Sorry Windows-Benutzer, es ist nur Mac, Diese Version des Lernprogramms funktioniert daher nur für Mac-Benutzer. Nachdem Sie die App heruntergeladen haben, müssen Sie Ihre Website-Struktur einrichten (die ich unten behandeln werde)..
In diesem Tutorial werden wir eine Menge Inhalt behandeln. Ich glaube daran, mit den besten verfügbaren Tools so effizient wie möglich zu arbeiten. Aus diesem Grund werden wir beschäftigen WordPress und Entwurf mit diesem Projekt arbeiten. Bevor Sie mit dem nächsten Schritt fortfahren, laden Sie das Blueprint Framework herunter.
Die einzige Datei, die wir verwenden werden, ist screen.css da es alle wichtigen Dateien, aus denen das Framework besteht, in einer Datei zusammenfasst. Finden Sie das heraus und ziehen Sie es auf Ihren Desktop. Aus Gründen der Kürze setzt dieses Tutorial voraus, dass Sie mit der Einrichtung von WordPress sowie den Grundlagen von Blueprint vertraut sind. Wenn Sie weitere Informationen dazu benötigen, lassen Sie mir einige Kommentare und ich werde antworten oder einen Beitrag darüber schreiben. Es gibt auch ein informatives Tut zu Nettuts über Blueprint
Um Ihre Dateistruktur einzurichten, lesen Sie den Screenshot unten. So sollte Ihre Verzeichnisstruktur aussehen, abgesehen von den CSS-Dateien im Stylesheets-Ordner. Diese werden automatisch generiert, wenn Sie eine Datei speichern.
Die wichtigsten Dinge, die Sie aus diesem Screenshot entnehmen können, sind, dass wir einen Ordner styles.css im Designverzeichnis von WordPress haben. Diese Datei zieht über die Direktive @import einige andere Dateien aus einem Unterverzeichnis ein. Der Grund dafür ist, dass WordPress die Kommentare in verwendet styles.css ein Thema identifizieren. Wenn man das nicht einsetzt, ist es ziemlich schlimm. Durch das Einfügen von Dateien in die styles.css Wir verwenden im Wesentlichen alle dynamischen Funktionen von Less CSS und stellen gleichzeitig sicher, dass sich unser Design in WordPress richtig verhält. Wir minimieren auch unser CSS, um die Ladezeit der Website zu beschleunigen. Außerdem werden alle Kommentare und Leerzeichen entfernt.
Es gibt einige Einstellungen, die ich gerne überprüfen möchte. Das möchten Sie wahrscheinlich auch. Unten sehen Sie einen Screenshot davon.
Als nächstes platzieren Sie die screen.css Datei in einem Unterverzeichnis namens stylesheets zusammen mit einer Datei main.css. Benennen Sie dann beide Dateien um, um eine Erweiterung .less anstelle von .css zu haben. Wenn Sie dies getan haben, starten Sie die Less-App auf Ihrem Mac und ziehen Sie Ihren Designordner in die App. Dadurch wird es im Wesentlichen so eingerichtet, dass die Less-App über Ihr Projekt informiert ist. Jedes Mal, wenn Sie Ihre weniger Dateien speichern, werden sie automatisch in CSS kompiliert. Ziemlich schlau, oder? Wenn dies aus irgendeinem Grund nicht der Fall ist, klicken Sie auf die Compiler-Registerkarte und dann auf Alle kompilieren.
Ok, jetzt, wo alles eingerichtet ist, was bewirkt Less wirklich für mich? Ich bin froh, dass Sie den jungen Padawan gefragt haben. Lass mich dir zeigen!
Angenommen, Sie haben einige Grundfarben auf Ihrer Website. Anstatt die Hex- oder RGBA-Werte jedes Mal eingeben zu müssen, wenn Sie eine Farbe verwenden möchten, können Sie einfach eine Variable zum Speichern Ihrer Farbe verwenden und dann den Variablennamen verwenden, um die Farbe zu identifizieren, die Sie verwenden möchten. Um zum Beispiel hellgrau zu speichern, können Sie eine Variable wie folgt deklarieren:
@lightGray = #ddd; / * - und dann wie folgt in Ihrer CSS verwenden: - * / div # box1 background: @lightGray;
Wann immer Sie Ihre Farbe ändern müssen, müssen Sie lediglich den Wert von @lightGray ändern. Der Wert wird dann an den Rest Ihrer CSS-Datei weitergegeben.
Der nächste raffinierte Trick, den ich diskutieren möchte, ist die Vererbung. Für die CSS-Neulinge bedeutet Vererbung lediglich, dass eine Klasse Merkmale einer vorherigen Klasse (übergeordnete Klasse) erben oder übernehmen kann. Dies geschieht durch ein Less-Konstrukt, das als Mixins bekannt ist. Diese bettet praktisch alle Eigenschaften einer Klasse in eine andere Klasse ein. Das Beste an Mixins ist, dass jede Eigenschaft, die Sie in Ihrer Kindklasse angeben, dasselbe Verhalten überschreibt, das von der Elternklasse vererbt wird. Im Klartext bedeutet dies, dass ich eine Klasse habe, die meine Schaltflächen auf meiner Seite anhand einiger nützlicher css3-Farbverläufe darstellt. Obwohl ich die Auffüllung, die Schriftgröße und andere Attribute der Schaltfläche mag, möchte ich vielleicht, dass sich meine Farben ändern. Ich würde folgendes tun:
/ * - Schaltfläche, die ich als Basis- / übergeordnete Schaltfläche verwende - * / .myBlueButton display: block; Polsterung: 4px 12px; Hintergrund: rgb (30,87,153); / * Alte Browser * / Hintergrund: -moz-linearer Gradient (oben, rgba (30,87,153,1) 0%, rgba (41,137,216,1) 50%, rgba (32,124,202,1) 51%, rgba (125,185,232, 1) 100%); / * FF3.6 + * / Hintergrund: -webkit-Gradient (linear, links oben, links unten, Farbstopp (0%, rgba (30,87,153,1)), Farbstopp (50%, rgba (41,137,216) 1)), Farbstopp (51%, rgba (32,124,202,1)), Farbstopp (100%, rgba (125,185,232,1))); / * Chrome, Safari4 + * / Hintergrund: -webkit-linearer Gradient (oben, rgba (30,87,153,1) 0%, rgba (41,137,216,1) 50%, rgba (32,124,202,1) 51%, rgba (125,185,232) 1) 100%); / * Chrome10 +, Safari5.1 + * / Hintergrund: -o-linearer Gradient (oben, rgba (30,87,153,1) 0%, rgba (41,137,216,1) 50%, rgba (32,124,202,1) 51%, rgba (125,185,232,1) 100%); / * Opera11.10 + * / Hintergrund: -ms-linearer Gradient (oben, rgba (30,87,153,1) 0%, rgba (41,137,216,1) 50%, rgba (32,124,202,1) 51%, rgba ( 125, 185, 232,1) 100%); / * IE10 + * / Hintergrund: linearer Gradient (oben, rgba (30,87,153,1) 0%, rgba (41,137,216,1) 50%, rgba (32,124,202,1) 51%, rgba (125,185,232,1) 100% ); / * W3C * / / * - Schaltfläche, die ich als untergeordnete / erbende Schaltfläche verwendet - * / .myGreenButton .myBlueButton; Hintergrund: rgb (157,213,58); / * Alte Browser * / Hintergrund: -moz-linearer Gradient (oben, rgba (157,213,58,1) 0%, rgba (161,213,79,1) 50%, rgba (128,194,23,1) 51%, rgba (124,188,10,1) 100%); / * FF3.6 + * / background: -webkit-gradient (linear, links oben, links unten, farbstopp (0%, rgba (157,213,58,1)), farbstopp (50%, rgba (161,213) 79,1)), Farbstopp (51%, rgba (128,194,23,1)), Farbstopp (100%, rgba (124,188,10,1))); / * Chrome, Safari4 + * / Hintergrund: -webkit-linearer Gradient (oben, rgba (157,213,58,1) 0%, rgba (161,213,79,1) 50%, rgba (128,194,23,1) 51% rgba (124,188,10,1) 100%); / * Chrome10 +, Safari5.1 + * / Hintergrund: -o-linearer Gradient (oben, rgba (157,213,58,1) 0%, rgba (161,213,79,1) 50%, rgba (128,194,23,1 ) 51%, rgba (124.188,10,1) 100%); / * Opera11.10 + * / Hintergrund: -ms-linearer Gradient (oben, rgba (157,213,58,1) 0%, rgba (161,213,79,1) 50%, rgba (128,194,23,1) 51 %, rgba (124,188,10,1) 100%); / * IE10 + * / Hintergrund: linearer Gradient (oben, rgba (157,213,58,1) 0%, rgba (161,213,79,1) 50%, rgba (128,194,23,1) 51%, rgba (124,188, 10,1) 100%); / * W3C * /
Es gibt eine Einschränkung, die Sie beachten sollten. Wenn Sie den Gradientengenerator css3 verwenden, scheint Less der Zeile, die mit filter beginnt, nicht zu gefallen. Wie Sie sehen, übernimmt die untergeordnete Schaltfläche das gesamte Verhalten der übergeordneten Schaltfläche, indem die Attribute der blauen Schaltfläche in die markierte Zeile eingefügt werden.
myBlueButton;
.
Dann setzt es die Farbe außer Kraft, indem es seine eigenen Hintergrundfarben angibt. Der nächste und letzte Punkt, den wir behandeln werden, ist die Verwendung einer parametrischen Mischung (einer Mischung, die Parameter benötigt) mit Weniger. Dies ist nützlich, wenn Sie browserspezifische Präfixe verwenden.
.borderRadius (@border_radius) -moz-border-radius: @border_radius; -webkit-radius: @border_radius; -border-radius: @border_radius;
Natürlich gibt es noch viele weitere Verhaltensweisen und Effekte, die Sie implementieren können. Sie können dem Link oben im Tut zur Less-Seite folgen und nach Herzenslust studieren. Es gibt auch ein kurzes Video zu Nettuts, das über die Less.js-Bibliothek spricht.
Das sind die Grundlagen zum Einrichten eines Projekts für die Verwendung in WordPress mit Less und BluePrint. Ich hoffe, dass das, was Sie heute hier gelernt haben, für zukünftige Projekte von Nutzen sein wird. Wenn Sie weitere Fragen haben, können Sie gerne in den Kommentaren antworten.
Accentsconagua