Share
Im ersten Teil der Serie habe ich einen kurzen Überblick über die beliebten Vorprozessoren LESS und SASS gegeben. Ich habe auch die Rahmenbedingungen behandelt, mit denen sie normalerweise verbunden sind.
Im zweiten Teil der Serie habe ich mich eingehend mit LESS beschäftigt und ein paar Details erläutert. Wir haben Variablen, Verschachtelungen und Mixins behandelt.
In diesem Teil der Serie werde ich beschreiben, wie Sie Ihr System logisch strukturieren können .Weniger Dateien. Ich werde auch darüber sprechen, wie man alle über Importe miteinander verbindet, und schließlich schnell die Vergrößerung behandeln.
Wir werden ein untergeordnetes Thema für das Standardthema Twenty Twelve erstellen. Für diejenigen von Ihnen, die mit dem Erstellen von untergeordneten Themen nicht vertraut sind, benötigen Sie zum Erstellen eines untergeordneten Themas nur ein style.css Datei. Weitere Informationen finden Sie im WordPress-Codex.
Zuerst wollen wir zum Themes-Ordner innerhalb von navigieren WP-Inhalt. Sie sollten das sehen zwanzig zwölf Ordner innerhalb von hier. Als nächstes erstellen wir einen neuen Ordner und benennen ihn weniger gebaut. Öffnen Sie diesen Ordner.
In unserem neuen weniger gebaut Ordner erstellen wir hier einen Ordner und benennen ihn css. Öffnen Sie diesen Ordner.
Innerhalb der css erstellen Sie einen weiteren Ordner namens Weniger und dann öffnen Sie es auch. In diesem Ordner möchten wir eine neue Datei erstellen, style.less. Öffne es.
Stellen Sie für eine Stichprobe sicher, dass Sie jetzt den folgenden Pfad zu Ihrem haben style.less Datei:
wp-content / themes / lessbuilt / css / less / style.less
Jetzt haben wir die Weniger Ordner erstellt. Wir werden alle unsere hinzufügen .Weniger Dateien in diesem Ordner.
Das erste, was wir in unserem tun wollen style.less In der Datei wird der Code hinzugefügt, damit wir festlegen können, dass wir ein untergeordnetes Design erstellen. Bitte fügen Sie folgendes hinzu:
Accentsconagua
/ * Themenname: Less Built Theme URI: http://wp.tutsplus.com Beschreibung: Untergeordnetes Thema für das Thema Zwanzig Zwölf. Autor: Jason Bradley Autor URI: http://everchangingmedia.com Vorlage: twentytwelve Version: 0.1.0 * / @import url ("… /twentytwelve/style.css"); Das ist alles, was wir brauchen, um damit anzufangen. Als Nächstes erstellen wir den anderen .Weniger Dateien und binden sie dann wieder zusammen style.less.
Die erste Datei, die ich vorschlagen werde, ist die Erstellung einer Variablen Datei. Hier speichern wir alle Variablen, die wir für unser Kinderthema verwenden werden. Dies wird allen unseren zugänglich sein .Weniger Dateien in unserem Weniger Mappe.
Öffnen Sie die neue Datei und fügen Sie Folgendes ein:
// variables.less // Colors @white: #fff; @ Grau: # 666; @ grau-dunkel: # 333; @ Graulicht: #eee; @blau: # 4d8b97; @ blau-dunkel: # 335c64; // Inhalt @ Körperhintergrundfarbe: @ Grau; @ Körperfarbe: @ Graulicht; @ content-background-color: @ grau-dunkel; // Header @ site-title-color: @white; @ site-title-color-hover: @blau; @ site-description-color: @ graues Licht; // Links @ Links-Color: @blue; @ links-color-hover: @ blau-dunkel; // Navigation @ menu-items-color: @ graues Licht; @ menu-items-color-hover: @blau; @ menu-items-color-active: @white; // Beiträge @ Eintrag-Titelfarbe: @white; @ border-color: @grau; // Widgets @ Suchformular-Hintergrundfarbe: @gray; @ Suchformular-Randfarbe: @ Grau; @ Suchformular-Textfarbe: @white;
Die nächste Datei, die wir erstellen werden, ist eine mixins.less Datei. Die Mehrheit der Änderungen, die wir vornehmen werden, betreffen die Verbindungsfarben. Ich werde ein Mixin erstellen, das eine Link- und Link-Hover-Farbe annimmt. Es wird das Styling zurückgeben, basierend auf dem, was in es übergeben wird.
Erstelle ein mixins.less Datei. Öffnen Sie diese Datei und fügen Sie Folgendes ein:
// mixins.less.links (@ link-color: @blau, @ link-color-hover: @ blau-dunkel) a color: @ link-color; &: hover color: @ link-color-hover;
Die nächste Datei enthält verschiedene Stylings wie Körper und Links. Ein ... kreieren misc.less Datei einfügen und dann Folgendes einfügen:
// misc.less body background-color: @ body-background-color; Farbe: @ Körperfarbe; .site Hintergrundfarbe: @ Inhaltshintergrundfarbe; .links ();
Es wird empfohlen, alle Navigationsstile zusammen zu halten, damit wir schnell wissen, wo wir unsere Menüs bearbeiten können.
Ein ... kreieren Navigation ohne Datei und fügen Sie Folgendes hinzu:
// navigation.less .main-navigation li .links (@ menu-items-color, @ menu-items-color-hover); .current-menu-item, .current-menu-ancestor, .current_page_item, .current_page_ancestor a color: @ menu-items-color-active;
Als Nächstes werden wir den Stil für den Seitentitel und die Beschreibung in der Kopfzeile hinzufügen.
Ein ... kreieren ohne Header Datei und fügen Sie Folgendes hinzu:
// header.less .site-title a color: @ site-title-color; .site-header h1, h2 .links (@ site-title-color, @ site-title-color-hover); .site-header h2 color: @ site-description-color;
Als nächstes wollen wir ein paar Stylings für unsere Beiträge hinzufügen. Wir ändern die Titelfarbe und die Farben für die Kopf- und Fußzeilen für den Eintrag.
Ein ... kreieren posts.less Datei und fügen Sie Folgendes hinzu:
// posts.less .site-content article border-bottom: 4px double @ border-color; .entry-header .entry-title .links (@ entry-title-color); .entry-header, .entry-meta .links ();
Wir möchten, dass unsere Seitentitel ebenfalls weiß sind. Ich würde auch vorschlagen, dass Sie hier auch Stilunterschiede, die Sie für Seiten und Beiträge wünschen, einfügen.
Ein ... kreieren Seiten Datei und fügen Sie Folgendes hinzu:
// pages.less .entry-header .entry-title color: @ entry-title-color;
Ich wollte einen Rand links von der Seitenleiste einfügen, also füge ich das in ein Sidebar.less Datei. Erstellen Sie diese Datei und fügen Sie Folgendes hinzu:
// sidebar.less #secondary border-left: 1px solid @ border-color; Polsterung links: 20px;
Wir möchten, dass die Widget-Überschriften weiß werden und die Links in unseren Widgets mit den anderen Links in unserem untergeordneten Thema übereinstimmen. Ich möchte auch die Farben des Suchformulars ändern.
Es wird empfohlen, die Widgets in einem beliebigen Stil zu gestalten widgets.less und bewahren Sie das Styling für den Behälter um sich herum auf Sidebar.less.
Ein ... kreieren widgets.less Datei und fügen Sie Folgendes hinzu:
// widgets.less .widget-area .widget .widget-title color: @ gray-light; .links (); // Suchformular #s, #searchsubmit background: @ search-form-background-color; border-color: @ Suchformular-Randfarbe; Farbe weiß;
Die letzte Datei, die wir erstellen werden, ist Fußzeile. Es enthält jedes Styling für die Fußzeile unseres Kindermotivs.
Ein ... kreieren Fußzeile Datei und fügen Sie Folgendes hinzu:
// footer.less footer [role = "contentinfo"] .links ();
So haben wir unser gesamtes Individuum geschaffen .Weniger Dateien, die unser Styling auflösen, werden in eine logische Struktur umgewandelt. Sie sollten gesehen haben, dass wir beim Erstellen unserer Dateien die von uns erstellten Variablen verwendeten Variablen in allen unseren anderen .Weniger Dateien. Wir haben auch unsere verwendet .Links () Mixin aus mixins.less eine Menge auch.
Die Art und Weise, wie wir all diese verbinden .Weniger Dateien zusammen sind Importe.
Importe in CSS und LESS sind genauso wie in anderen Sprachen. Sie sagen Ihrem Compiler, dass Ihre aktuelle Datei andere Dateien kennen und verwenden soll. Es ist wie beim Importieren einer Bibliothek oder eines Frameworks, das Sie in .NET verwenden, Ruby-Edelsteinen usw..
Die Syntax für das Importieren einer Datei mit LESS entspricht der von CSS. Da alle unsere .Weniger Dateien befinden sich im selben Ordner, wir verwenden Folgendes:
@import "dateiname.los";
Dies sagt unserem LESS-Compiler, dass Sie beim Kompilieren dieser Datei auch diese andere Datei verwenden sollten.
In unserer style.less Datei, werden wir Importe für jeden hinzufügen .Weniger Dateien, die wir erstellt haben. Dies wird auch sicherstellen, dass alle .Weniger Datei, in die Sie importieren style.less wird auch verbunden sein.
Zum Beispiel, wenn wir importieren Variablen und widgets.less in unserer style.less Datei, die Variablen, die wir definiert haben Variablen wird zugänglich sein in widgets.less.
/ * Themenname: Less Built Theme URI: http://wp.tutsplus.com Beschreibung: Untergeordnetes Thema für das Thema Zwanzig Zwölf. Autor: Jason Bradley Autor URI: http://everchangingmedia.com Vorlage: twentytwelve Version: 0.1.0 * / // Importiere übergeordnete Designstile @import url ("… /twentytwelve/style.css"); /* /\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\ INHALT /\/\/\/\/\/\/ \ / \ / \ / \ / \ / \ / \ / \ \ \ \ \ \ \ \ \ \ \ \ 1. Verschiedenes - Variablen - Mixins - Verschiedenes 2. Navigation 3. Kopfzeile 4. Beiträge 5. Seiten 6. Seitenleiste 7. Widgets 8. Fußzeile * / / * ------------------------------------------ ---------------------------- 1. Sonstiges * / // Variablen @import "variables.less"; // Mixins @import "mixins.less"; // Sonstiges @import "misc.less"; / * ------------------------------------------------ ---------------------- 2. Navigation * / @import "navigation.less"; / * ------------------------------------------------ ---------------------- 3. Header * / @import "header.less"; / * ------------------------------------------------ ---------------------- 4. Beiträge * / @import "posts.less"; / * ------------------------------------------------ ---------------------- 5. Seiten * / @import "pages.less"; / * ------------------------------------------------ ---------------------- 6. Sidebar * / @import "Sidebar.less"; / * ------------------------------------------------ ---------------------- 7. Widgets * / @import "widgets.less"; / * ------------------------------------------------ ---------------------- 8. Fußzeile * / @import "footer.less"; Jetzt haben wir alle unsere .Weniger Dateien erstellt und alle in unsere importiert style.less Datei, möchten wir den Ausgabepfad von festlegen style.less in CodeKit.
Wir haben darüber gesprochen, wie Sie die Ausgabe unserer einstellen .Weniger Datei im vorherigen Beitrag.
Das Tolle an der Verwendung von LESS zum Erstellen und Kompilieren von CSS ist, dass Sie auswählen können, in welches Format Sie kompilieren möchten. Dies bedeutet, dass Sie es entweder in seiner regulären Form kompilieren oder Ihre Dateien minimieren können.
Es wird definitiv empfohlen, alle Ihre Website zu minimieren .css Dateien. Je kleiner die Datei ist, desto schneller wird Ihre Site geladen. Sie möchten die kleinste Dateigröße, da jede Seite erst geladen wird und vom Benutzer nicht gesehen werden kann .css Dateien werden geladen. Ihre Seitenladegeschwindigkeit beeinflusst auch Ihre SEO.
Mit CodeKit ist das Ändern der Einstellung für die Ausgabe in minify so einfach wie das Ändern von Ausgabestil zu reduzierten. Jetzt jedes Mal, wenn Sie eine Änderung an einem Ihrer vornehmen .Weniger Dateien, CodeKit kompiliert sie automatisch und minimiert sie zu Ihren Kinderthemen style.css Datei.
Ich habe die Best Practices für die Strukturierung Ihres Projekts durchgegangen .Weniger Dateien in Ihrem Thema oder untergeordneten Thema. Ich sprach auch über die Ordnerstruktur und über die Platzierung der Ordner .Weniger Dateien.
Ich habe dich durch die Schaffung all der .Weniger Dateien und sprach darüber, wie Sie alle mit Ihrem Computer verbinden style.less Datei mit Importen. Schließlich sprach ich darüber, wo Sie den Ausgabepfad Ihres festlegen style.less Datei und wie Sie CodeKit abmelden können .Weniger Dateien beim Kompilieren.
Ich habe auch das hinzugefügt weniger gebaut untergeordnetes Design für GitHub, so dass Sie es zusammenfassen oder herunterladen können.
