Share
I første del av serien ga jeg et raskt overblikk over de populære preprosessorer LESS og SASS. Jeg dekket også rammene de vanligvis er knyttet til.
I den andre delen av serien gjorde jeg et dypt dykk inn i LESS og detaljert noen av funksjonene. Vi dekket variabler, nesting og mixins.
I denne delen av serien vil jeg dekke hvordan man logisk strukturerer din .mindre filer. Jeg vil også dekke hvordan du kobler dem alle sammen ved hjelp av import, og endelig dekker raskt forstørrelsen.
Vi skal skape et barn tema for standard Twenty Twelve tema. For de av dere som ikke er kjent med å skape barntemaer, er det eneste vi trenger for å lage et barn tema et style.css fil. For mer info, besøk WordPress Codex.
Først vil vi navigere til tema-mappen inne i wp-innhold. Du bør se tjue tolv mappe innsiden av her. Vi skal til neste lage en ny mappe og gi den navnet lessbuilt. Åpne den mappen.
Inne i vår nye lessbuilt mappe vi skal lage en mappe her og nevne den css. Åpne den mappen.
Innsiden av css mappe, opprett en annen mappe som heter mindre og så åpner den også. Innsiden av denne mappen vil vi ønske å lage en ny fil, style.less. Åpne den opp.
For en punktkontroll må du sørge for at du har følgende sti nå til din style.less fil:
wp-content / themes / lessbuilt / css / mindre / style.less
Nå som vi har mindre mappe opprettet. Vi vil legge til alle våre .mindre filer i denne mappen.
Det første vi skal ønske å gjøre i vår style.less filen er legge til koden slik at vi kan utpeke at vi oppretter et barntema. Vennligst legg til følgende:
Accentsconagua
/ * Tema Navn: Mindre Bygget Tema URI: http://wp.tutsplus.com Beskrivelse: Barn tema for Twenty Twelve tema Forfatter: Jason Bradley Forfatter URI: http://everchangingmedia.com Mal: twentytwelve Versjon: 0.1.0 * / @import url ("... /twentytwelve/style.css"); Det er alt vi trenger for å komme i gang med. Deretter skal vi opprette den andre .mindre filer og bind dem alle sammen igjen her inne style.less.
Den første filen jeg skal foreslå at vi lager er en variables.less fil. Det er her vi skal lagre alle variablene vi skal bruke til vårt barn tema. Dette vil være tilgjengelig for alle våre .mindre filer i vår mindre mappe.
Åpne den nye filen og lim inn følgende:
// variables.less // Farger @white: #fff; @gray: # 666; @ grå-mørk: # 333; @ grålys: #eee; @blå: # 4d8b97; @ blå-mørk: # 335c64; // Innhold @ kropp-bakgrunnsfarge: @gray; @ kroppsfarge: @ grålys; @ innhold-bakgrunnsfarge: @ grå-mørk; // Header @ site-title-color: @white; @ site-title-color-hover: @ blå; @ site-description-color: @ grå-lys; // Links @ links-color: @blue; @ links-color-hover: @ blå-mørk; // Navigasjon @ menyelementer-farge: @ grålys; @ menyelementer-fargebøyer: @blå; @ menyelementer-fargeaktiv: @white; // Innlegg @ entry-title-color: @white; @ grensefarge: @gray; // Widgets @ search-form-background-color: @gray; @ search-form-border-farge: @gray; @ søk-skjema-tekst-farge: @white;
Den neste filen vi skal lage er en mixins.less fil. Flertallet av endringene vi skal gjøre er å linkene farger. Jeg skal lage en mixin som tar en koblingsfarge og link svingerfarge. Det vil returnere stylingen basert på hva som er sendt inn i den.
Først opprett en mixins.less fil. Åpne filen og lim inn følgende i det:
// mixins.less .links (@ link-color: @blue, @ link-color-hover: @ blå-mørk) a color: @ link-color; &: svever farge: @ link-color-hover;
Den neste filen kommer til å holde diverse stylinger som kroppen og koblingene. Lage en misc.less Fil deretter lim inn i følgende:
// ukjent kropp bakgrunnsfarge: @ kroppsbakgrunnsfarger; farge: @ kroppsfarge; .site bakgrunnsfarge: @ innhold-bakgrunnsfarge; .links ();
Det anbefales å holde alle navigeringsmodeller sammen slik at vi raskt kan vite hvor du skal gå for å redigere menyene våre.
Lage en navigation.less fil og legg til følgende for det:
// navigation.less .main-navigasjon li .links (@ menyelementer -farge, @ menyelementer-fargebøyer); .Current-menu-item, .current-meny-forfedre, .current_page_item, .current_page_ancestor a color: @ menyelementer-fargeaktiv;
Deretter skal vi legge til styling for nettstedets tittel og beskrivelse i overskriften.
Lage en header.less fil og legg til følgende for 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;
Neste vil vi legge til noen styling for våre innlegg. Vi endrer tittelfargen og fargene for oppføringsoverskrift og bunntekst.
Lage en posts.less fil og legg til følgende for det:
// posts.less .site-innhold artikkel border-bottom: 4px double @ border-color; .entry-header .entry-title .links (@ entry-title-color); .entry-header, .entry-meta .links ();
Vi vil at våre sidetitler skal være hvite også. Jeg vil også foreslå at du legger noen stylingsforskjeller du vil ha for sider mot innlegg også her.
Lage en pages.less fil og legg til følgende:
// pages.less .entry-header .entry-title color: @ entry-title-color;
Jeg ville legge til en ramme til venstre for sidefeltet, så jeg skal legge til det i a sidebar.less fil. Opprett den filen og legg til følgende:
// sidebar.less #secondary border-left: 1px solid @ border-color; polstring-venstre: 20px;
Vi ønsker å lage widgettitlene hvite og gjøre koblingene i modulene våre til de andre koblingene i barnetemaet vårt. Jeg vil også endre fargen på søkeskjemaet.
Det er foreslått å sette noen styling for widgets i widgets.less og hold stylingen til containeren rundt dem i sidebar.less.
Lage en widgets.less fil og legg til følgende for det:
// widgets.less .widget-område .widget .widget-title color: @ gray-light; .links (); // Søk skjema #s, #searchsubmit background: @ search-form-background-color; border-color: @ search-form-border-farge; farge: @white;
Den siste filen vi skal lage er footer.less. Det vil inneholde noen styling for bunnteksten til barnet vårt.
Lage en footer.less fil og legg til følgende for det:
// footer.less footer [roll = "contentinfo"] .links ();
Så vi har skapt alle våre individuelle .mindre filer for å bryte opp våre stylingsendringer til en logisk struktur. Du burde ha sett at når vi lager våre filer, brukte vi variablene vi opprettet i variables.less i alle våre andre .mindre filer. Vi har også brukt vår .linker () mixin fra mixins.less mye, så vel.
Måten vi skal koble til alle disse .mindre filer sammen er ved å bruke import.
Importen i CSS og LESS er akkurat som de andre språkene. Du forteller kompilatoren din at du vil at din nåværende fil skal vite om og bruke andre filer. Det er som å importere et bibliotek eller rammeverk som du bruker i. NET, Ruby-perler, etc..
Syntaxen for å importere en fil med LESS er akkurat som den for CSS. Siden alle våre .mindre filer er i samme mappe, vil vi bruke følgende:
@import "filename.less";
Dette vil fortelle vår MINDRE kompilator at når du kompilerer denne filen, bør du også bruke denne andre filen også.
I vår style.less fil, vil vi legge til import for hver av .mindre filer som vi opprettet. Dette vil også sørge for at noen .mindre fil du importerer inn style.less vil også være tilkoblet.
For eksempel, hvis vi importerer variables.less og widgets.less i vår style.less fil, variablene vi definerte i variables.less vil være tilgjengelig i widgets.less.
/ * Tema Navn: Mindre Bygget Tema URI: http://wp.tutsplus.com Beskrivelse: Barn tema for Twenty Twelve tema Forfatter: Jason Bradley Forfatter URI: http://everchangingmedia.com Mal: twentytwelve Versjon: 0.1.0 * / // Import foreldre tema stiler @ importportl ("... /twentytwelve/style.css"); / * / \ / \ / \ / \ / \ / \ / \ / \ / \ / \ / \ / \ / \ / \ / \ / \ / \ CONTENTS / \ / \ / \ / \ / \ / \ / \ / \ / \ / \ / \ / \ / \ / \ // \ / \ / \ / \ 1. Diverse - Variabler - Mixins - Diverse 2. Navigasjon 3. Overskrift 4. Innlegg 5. Sider 6. Sidefelt 7. Widgets 8. Footer * / / * ------------------------------------------ ---------------------------- 1. Miscellanous * / // Variables @import "variables.less"; // Mixins @import "mixins.less"; // Diverse @ Import "feilfri"; / * ------------------------------------------------ ---------------------- 2. Navigasjon * / @import "navigation.less"; / * ------------------------------------------------ ---------------------- 3. Overskrift * / @import "header.less"; / * ------------------------------------------------ ---------------------- 4. Innlegg * / @import "posts.less"; / * ------------------------------------------------ ---------------------- 5. Sider * / @import "pages.less"; / * ------------------------------------------------ ---------------------- 6. Sidebar * / @import "sidebar.less"; / * ------------------------------------------------ ---------------------- 7. Widgets * / @import "widgets.less"; / * ------------------------------------------------ ---------------------- 8. Footer * / @import "footer.less"; Nå som vi har alle våre .mindre filer opprettet og alle importert til vår style.less fil, vil vi ønske å angi produksjonsbanen til style.less i CodeKit.
Vi dekket hvordan du skal angi produksjonen av vår .mindre fil i forrige innlegg.
Den gode tingen om å bruke LESS for å lage og kompilere CSS er at du kan velge hvilket format du vil kompilere til. Dette betyr at du enten kan kompilere det i vanlig form eller redusere filene dine.
Det er definitivt foreslått å redusere alle nettstedets .css filer. Jo mindre filen, desto raskere blir nettstedet ditt lastet inn. Du vil ha den minste filstørrelsen fordi hver side ikke lastes og blir sett av brukeren til .css filer er lastet inn. Sidens lasthastighet påvirker også din SEO.
Med CodeKit er det enkelt å endre innstillingen for utdata for å redusere Utgangsstil å redusert. Nå hver gang du gjør en endring til noen av dine .mindre filer, vil CodeKit automatisk kompilere dem og redusere dem til ditt barntema style.css fil.
Jeg har gått over de beste metodene for å strukturere din .mindre filer i temaet ditt eller temaet ditt. Jeg snakket også om mappestrukturen og hvor du skal plassere .mindre filer.
Jeg traff deg gjennom å skape alle .mindre filer og snakket om hvordan du kobler dem til din style.less fil ved bruk av import. Til slutt snakket jeg om hvor du skal angi produksjonsbanen til din style.less fil og hvordan du kan få CodeKit til å redusere din .mindre filer når den kompilerer.
Jeg har også lagt til lessbuilt barn tema til GitHub slik at du kan gaffel det eller laste det ned.
