Share
I serieens första del gav jag en snabb översikt över de populära preprocessorerna LESS och SASS. Jag omfattade också de ramar som de vanligtvis är förknippade med.
I den andra delen av serien gjorde jag en djup dyka in i LESS och detaljerade några av dess funktioner. Vi omfattade variabler, nestning och mixins.
I den här delen av serien kommer jag att täcka hur du logiskt strukturerar din .mindre filer. Jag kommer också att täcka hur man ansluter dem alla med hjälp av import och slutligen täcker förstoringen.
Vi ska skapa ett barntema för det vanliga Twenty Twelve-temat. För er som inte är kända för att skapa barnteman är det enda vi behöver för att skapa ett barntema ett style.css fil. För mer information, besök WordPress Codex.
Först kommer vi att vilja navigera till teman mappen inuti wp-innehåll. Du borde se tjugo tolv mapp inuti här. Vi ska nästa skapa en ny mapp och namnge den lessbuilt. Öppna den mappen.
Inuti vårt nya lessbuilt mapp vi ska skapa en mapp här och namnge den css. Öppna den mappen.
Inne i css mapp, skapa ytterligare en mapp som heter mindre och öppna sedan upp det också. Inne i den här mappen vill vi skapa en ny fil, style.less. Öppna den upp.
För en platskontroll, se till att du har följande väg nu till din style.less fil:
wp-content / themes / lessbuilt / css / mindre / style.less
Nu när vi har mindre mapp skapad. Vi kommer att lägga till alla våra .mindre filer i den här mappen.
Det första vi ska vilja göra i vårt style.less filen är att lägga till koden så att vi kan ange att vi skapar ett barntema. Lägg till följande:
Accentsconagua
/ * Tema Namn: Mindre Byggd Tema URI: http://wp.tutsplus.com Beskrivning: Barn tema för Twenty Twelve tema Författare: Jason Bradley Författare URI: http://everchangingmedia.com Mall: twentytwelve Version: 0.1.0 * / @import url ("... /twentytwelve/style.css"); Det är allt vi behöver för att komma igång med. Nästa kommer vi att skapa den andra .mindre filer och knyta dem alla tillsammans igen här style.less.
Den första filen som jag föreslår att vi skapar är en variables.less fil. Det är här vi ska lagra alla variabler vi ska använda för vårt barntema. Detta kommer att vara tillgängligt för alla våra .mindre filer i vår mindre mapp.
Öppna den nya filen och klistra in i följande:
// variabler.lös // Färger @white: #fff; @gray: # 666; @ gråmått: # 333; @ grå-ljus: #eee; @blå: # 4d8b97; @ blå-mörk: # 335c64; // Innehåll @ kropp-bakgrundsfärg: @gray; @ kroppsfärg: @ grå-ljus; @ innehåll-bakgrundsfärg: @ grå-mörk; // Header @ site-title-color: @white; @ site-title-color-hover: @blue; @ site-description-color: @ grå-ljus; // Länkar @ länkar-färg: @blue; @ länkar-färg-svävar: @ blå-mörk; // Navigation @ menyalternativ-färg: @ grå-ljus; @ meny-objekt-färg-hover: @blue; @ menyalternativ-färgaktiv: @white; // Inlägg @ entry-title-color: @white; @ border-color: @gray; // Widgets @ sök-form-bakgrundsfärg: @gray; @ search-form-border-color: @gray; @ sökformulär-textfärg: @white;
Nästa fil vi ska skapa är en mixins.less fil. Majoriteten av de förändringar vi kommer att göra är till länkfärgerna. Jag ska skapa en mixin som tar en länkfärg och länkhuvudfärg. Det kommer att återställa styling baserat på vad som passeras in i den.
Skapa först en mixins.less fil. Öppna den filen och klistra in följande i det:
// mixins.less. links (@ link-color: @blue, @ link-color-hover: @ blå-mörk) a color: @ link-color; &: sväva färg: @ länk-färg-svävar;
Nästa fil kommer att hålla olika stylingar som kroppen och länkarna. Skapa en misc.less filen klistra in i följande:
// oliklös kropp bakgrundsfärg: @ kropps-bakgrundsfärg; färg: @ kroppsfärg; .site bakgrundsfärg: @ innehåll-bakgrundsfärg; .links ();
Det rekommenderas att hålla hela navigeringsmodellen tillsammans så att vi snabbt kan veta var du ska gå för att redigera våra menyer.
Skapa en navigation.less fil och lägg till följande till det:
// navigation.less .main-navigation li .links (@ meny-objekt-färg, @ meny-objekt-färg-svängare); .current-menu-item, .current-meny-förfader, .current_page_item, .current_page_ancestor a färg: @ menyalternativ-färgaktiv;
Därefter kommer vi att lägga till stilen för webbplatsens titel och beskrivning i rubriken.
Skapa en header.less fil och lägg till följande till det:
// 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;
Nästa kommer vi att vilja lägga till en stil för våra inlägg. Vi kommer att ändra titelfärgen och inmatningsrubrikerna och sidfotflikarna.
Skapa en posts.less fil och lägg till följande till det:
// posts.less .site-content article border-bottom: 4px double @ border-color; .entry-header .entry-title . links (@ entry-title-color); .entry-header, .entry-meta .links ();
Vi vill att våra sidtitlar ska vara vita också. Jag skulle också föreslå att du ställer några stylingsskillnader som du vill ha för sidor jämfört med inlägg här också.
Skapa en pages.less fil och lägg till följande:
// pages.less .entry-header .entry-title color: @ entry-title-color;
Jag ville lägga till en gräns till vänster om sidofältet, så jag lägger till det i a sidebar.less fil. Skapa den filen och lägg till följande:
// sidebar.less #secondary border-left: 1px solid @ border-color; stoppning-vänster: 20px;
Vi vill göra widgettitlarna vita och göra länkarna i våra widgets matcha de andra länkarna i vårt barntema. Jag vill också ändra färgerna på sökformuläret.
Det föreslås att du ställer in någon styling för widgets i widgets.less och behåll stilen för behållaren runt dem i sidebar.less.
Skapa en widgets.less fil och lägg till följande till det:
// widgets.less .widget-area .widget .widget-title color: @ gray-light; .links (); // Sökformulär #s, #searchsubmit background: @ search-form-background-color; border-color: @ search-form-border-color; färg vit;
Den sista filen vi ska skapa är footer.less. Det kommer att innehålla någon styling för sidfoten av vårt barntema.
Skapa en footer.less fil och lägg till följande till det:
// footer.less footer [roll = "contentinfo"] .links ();
Så vi har skapat hela vår individ .mindre filer för att bryta upp våra stylingändringar till en logisk struktur. Du borde ha sett att när vi skapade våra filer använder vi de variabler som vi skapade i variables.less i alla våra andra .mindre filer. Vi har också använt vårt .länkar () mixin från mixins.less mycket, också.
Det sätt som vi ska ansluta alla dessa .mindre filer tillsammans är genom att använda importen.
Importen i CSS och LESS är precis som på andra språk. Du berättar kompilatorn att du vill att din nuvarande fil ska veta om och använda andra filer. Det är som att importera ett bibliotek eller en ram som du använder i .NET, Ruby gems, etc..
Syntaxen för att importera en fil med LESS är precis som den för CSS. Sedan alla våra .mindre filer finns i samma mapp, kommer vi att använda följande:
@import "filename.less";
Detta kommer att berätta för vår MINDRE kompilator att när du sammanställer den här filen ska du också använda den här andra filen.
I vår style.less fil, vi vill lägga till import för var och en av .mindre filer som vi skapade. Detta kommer också att se till att någon .mindre fil du importerar i style.less kommer att anslutas också.
Till exempel, om vi importerar variables.less och widgets.less i vår style.less fil, de variabler som vi definierade i variables.less kommer att vara tillgänglig i widgets.less.
/ * Tema Namn: Mindre Byggd Tema URI: http://wp.tutsplus.com Beskrivning: Barn tema för Twenty Twelve tema Författare: Jason Bradley Författare URI: http://everchangingmedia.com Mall: twentytwelve Version: 0.1.0 * / // Importera överordnade tematyper @ import url ("... /twentytwelve/style.css"); /* /\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\ INNEHÅLL /\/\/\/\/\/\/ \ / \ / \ / \ / \ / \ / \ / \ // \ / \ / \ / \ 1. Diverse - Variabler - Mixins - Diverse 2. Navigation 3. Rubrik 4. Inlägg 5. Sidor 6. Sidofält 7. Widgets 8. Footer * / / * ------------------------------------------ ---------------------------- 1. Miscellanous * / // Variables @import "variables.less"; // Mixins @ import "mixins.less"; // Misc @ import "misc.less"; / * ------------------------------------------------ ---------------------- 2. Navigation * / @import "navigation.less"; / * ------------------------------------------------ ---------------------- 3. Header * / @import "header.less"; / * ------------------------------------------------ ---------------------- 4. Inlägg * / @import "posts.less"; / * ------------------------------------------------ ---------------------- 5. Sidor * / @import "pages.less"; / * ------------------------------------------------ ---------------------- 6. Sidofält * / @import "sidebar.less"; / * ------------------------------------------------ ---------------------- 7. Widgets * / @import "widgets.less"; / * ------------------------------------------------ ---------------------- 8. Footer * / @import "footer.less"; Nu när vi har alla våra .mindre filer skapade och alla importerade till vår style.less fil, vi kommer att vilja ställa in utgångsbanan för style.less i CodeKit.
Vi omfattade hur man ställer in produktionen från vår .mindre filen i föregående inlägg.
Det stora med att använda LESS för att skapa och sammanställa din CSS är att du kan välja vilket format du vill kompilera till. Det betyder att du antingen kan kompilera det i sin vanliga form eller minska dina filer.
Det är definitivt föreslagit att minifiera hela din webbplats .css filer. Ju mindre filen är desto snabbare kommer din webbplats att ladda. Du vill ha den minsta filstorleken eftersom varje sida inte laddas och ses av användaren fram till .css filer laddas. Din sidlastningshastighet påverkar också din SEO.
Med CodeKit kan du ändra inställningen för din utmatning för att minska, så enkelt som att ändra Utgångsstil till Minifierad. Nu varje gång du gör en förändring till någon av dina .mindre filer, kommer CodeKit automatiskt kompilera dem och minifiera dem till ditt barntema style.css fil.
Jag har gått över de bästa metoderna för att strukturera din .mindre filer i ditt tema eller barntema. Jag pratade också om mappstrukturen och var du skulle placera .mindre filer.
Jag trampade dig genom att skapa alla .mindre filer och pratade om hur man ansluter dem alla till din style.less fil med import. Slutligen pratade jag om var du skulle ställa in din utgående sökväg style.less fil och hur du får CodeKit att begränsa din .mindre filer när det sammanställs.
Jag har också lagt till lessbuilt barntema till GitHub så att du kan gaffla det eller ladda ner det.
