Share
În prima parte a seriei am făcut o scurtă trecere în revistă a popularelor preprocesoare LESS și SASS. De asemenea, am acoperit cadrele cu care sunt de obicei asociate.
În cea de-a doua parte a seriei am făcut o scufundare profundă în mai puține și detaliate câteva dintre caracteristicile sale. Am acoperit variabilele, cuiburile și amestecurile.
În această parte a seriei voi discuta cum să vă structurați în mod logic .Mai puțin fișiere. De asemenea, voi discuta cum să le conectați pe toate folosind importurile și, în cele din urmă, să acoperiți rapid mărirea.
Vom crea o temă pentru copil pentru tema implicită Twenty Twelve. Pentru aceia dintre voi care nu sunteți familiarizați cu crearea de teme pentru copii, singurul lucru pe care trebuie să-l creați este tema copilului style.css fişier. Pentru mai multe informații, vizitați Codex-ul WordPress.
În primul rând, vom dori să navigăm la dosarul tematic din interiorul wp-content. Ar trebui să vezi doua zeci doisprezece dosar din interiorul aici. Vom crea un folder nou și îl vom numi lessbuilt. Deschideți dosarul respectiv.
În noi lessbuilt dosarul pe care îl vom crea aici și îl vom numi css. Deschideți dosarul respectiv.
În interiorul css folder, creați încă un alt dosar numit Mai puțin și apoi deschideți-l și el. În interiorul acestui dosar vom dori să creați un fișier nou, style.less. Deschide-l.
Pentru o verificare la fața locului, asigurați-vă că aveți următoarea cale spre dvs. style.less fişier:
wp-content / teme / lessbuilt / css / mai / style.less
Acum că avem Mai puțin folderul creat. Vom adăuga toate noastre .Mai puțin fișierele din acest dosar.
Primul lucru pe care vom dori să-l facem în nostru style.less fișierul adaugă codul pentru a ne permite să desemnați că creați o temă pentru copii. Adăugați următoarele:
Accentsconagua
/ * Tema Nume: Temă URI mai puțin construită URI: http://wp.tutsplus.com Descriere: Tema copilului pentru tema Twenty Twelve Autor: Jason Bradley Autor URI: http://everchangingmedia.com Format: twentytwelve Versiune: 0.1.0 * / @import url ("... /twentytwelve/style.css"); Asta e tot ce trebuie să începem. Apoi, vom crea celălalt .Mai puțin fișiere și apoi legați-le pe toate împreună înapoi aici style.less.
Primul fișier pe care îl voi sugera pe care îl creăm este a variables.less fişier. Aici vom stoca toate variabilele pe care le vom folosi pentru tema copilului nostru. Acest lucru va fi accesibil tuturor .Mai puțin fișierele noastre Mai puțin pliant.
Deschideți noul fișier și lipiți-l în următoarele:
// variabilele // Culori @ alb: #fff; @gray: # 666; @ gri-întuneric: # 333; @ gray-light: #eee; @ albastru: # 4d8b97; @ albastru-întuneric: # 335c64; // Content @ body-background-color: @gray; @ corp-culoare: @ gri-lumina; @ content-background-color: @ gri-întuneric; // Header @ site-title-color: @ albă; @ site-title-color-hover: @ albastru; @ site-description-color: @ gri-light; // Linkuri @ link-color: @ albastru; @ link-color-hover: @ albastru-întuneric; // Navigare @ meniu-elemente-culoare: @ gri-light; @ meniu-elemente-color-hover: @ albastru; @ meniu-items-color-active: @white; // Mesaje @ entry-title-color: @white; @ border-color: @gray; // widgets @ search-form-background-color: @gray; @ formular de căutare-graniță-culoare: @gray; @ căutare-formă-text-culoare: @ albă;
Următorul fișier pe care îl vom crea este a mixins.less fişier. Majoritatea schimbărilor pe care le vom face sunt culorile link-ului. Am de gând să creez un mixin care are o culoare de legătură și o legătură cu culoarea. Va reveni stilul bazat pe ceea ce este trecut în el.
Mai întâi creați a mixins.less fişier. Deschideți fișierul respectiv și inserați în el următoarele:
// mixins.less .links (@ link-color: @ albastru, @ link-color-hover: @ albastru-întuneric) a culoare: @ link-color; &: hover culoare: @ link-color-hover;
Următorul fișier va organiza diverse stilizări precum corpul și legăturile. Creeaza o misc.less dosar apoi lipiți în următoarele:
// corp misc.less background-color: @ body-background-color; culoare: @ corp-culoare; . site-ul background-color: @ content-background-color; .links ();
Sa sugerat să păstrăm împreună stilul de navigare, astfel încât să putem ști rapid unde să ne editați meniurile.
Creeaza o navigation.less fișier și adăugați următoarele:
// navigation.less .main-navigation li . link-uri (@ meniu-items-color, @ menu-items-color-hover); . curent-meniu-element, .current-meniu-ancestor, .current_page_item, .current_page_ancestor a culoare: @ meniu-elemente-color-activ;
Apoi, vom adăuga stilul pentru titlul și descrierea site-ului în antet.
Creeaza o header.less fișier și adăugați următoarele:
// header.less .site-title a culoare: @ site-title-color; header-site-ul h1, h2 .links (@ site-title-color, @ site-title-color-hover); .site-header h2 culoare: @ site-description-color;
În continuare vom dori să adăugăm un stil pentru postările noastre. Vom schimba culoarea titlului și culorile link-ului antetului și subsolului de intrare.
Creeaza o posts.less fișier și adăugați următoarele:
// posts.less-site-content articol border-bottom: 4px dublu @ border-color; .entr-antet .entry-title .links (@ entry-title-color); .entry-header, .entry-meta .links ();
Vrem ca și titlurile paginilor noastre să fie albe. Aș sugera, de asemenea, să puneți diferențele de stil pe care le doriți pentru paginile versus posturile de aici, de asemenea.
Creeaza o pages.less fișier și adăugați următoarele:
// pages.less .entry-header .entry-title culoare: @ entry-title-color;
Am vrut să adaug o margine în partea stângă a barei laterale, așa că am să adaug că în a sidebar.less fişier. Creați acel fișier și adăugați următoarele:
// sidebar.less # secundară border-left: 1px solid @ border-color; padding-left: 20px;
Vrem să facem titlurile widgetului alb și să facem ca legăturile din widgeturile noastre să se potrivească cu celelalte linkuri din tema copilului nostru. De asemenea, doresc să modific culorile formularului de căutare.
Se sugerează să puneți orice stil pentru widget-uri în widgets.less și păstrați stilul pentru containerul din jurul lor sidebar.less.
Creeaza o widgets.less fișier și adăugați următoarele:
// widgets.less.widget-area .widget .widget-title culoare: @ gri-light; .links (); // Formularul de căutare #s, #searchsubmit background: @ search-form-background-color; border-color: @ search-form-border-color; culoare albă;
Ultimul fișier pe care îl vom crea este footer.less. Acesta va conține orice stil pentru subsolul temei copilului nostru.
Creeaza o footer.less fișier și adăugați următoarele:
// footer.less footer [rol = "contentinfo"] .links ();
Așa că am creat toți individualii noștri .Mai puțin fișiere pentru a descompune modificările stilului într-o structură logică. Ar fi trebuit să văd că, pe măsură ce creăm fișierele noastre, folosim variabilele create de noi variables.less în toate celelalte .Mai puțin fișiere. De asemenea, ne-am folosit .Link-uri () se amestecă de la mixins.less mult, de asemenea.
Felul în care vom conecta toate acestea .Mai puțin dosare împreună este prin utilizarea importurilor.
Importurile în CSS și LESS sunt la fel ca cele din alte limbi. Spuneți compilatorului că doriți ca fișierul dvs. curent să cunoască și să utilizeze alte fișiere. Este ca și cum ați importa o bibliotecă sau un cadru pe care îl utilizați în .NET, pietre Ruby etc.
Sintaxa pentru importarea unui fișier cu LESS este exact ca cea a CSS. Deoarece toate noastre .Mai puțin fișierele sunt în același folder, vom folosi următoarele:
@import "filename.less";
Acest lucru va spune compilatorului nostru LESS că atunci când compilați acest fișier, ar trebui să utilizați și acest alt fișier.
În a noastră style.less fișier, vom dori să adăugăm importuri pentru fiecare dintre .Mai puțin fișiere pe care le-am creat. Acest lucru va asigura, de asemenea, că orice .Mai puțin fișierul pe care îl importați style.less vor fi conectate, de asemenea.
De exemplu, dacă importăm variables.less și widgets.less în a noastră style.less fișierul, variabilele pe care le-am definit variables.less vor fi accesibile în widgets.less.
/ * Tema Nume: Temă URI mai puțin construită URI: http://wp.tutsplus.com Descriere: Tema copilului pentru tema Twenty Twelve Autor: Jason Bradley Autor URI: http://everchangingmedia.com Format: twentytwelve Versiune: 0.1.0 * / // Importați stiluri tematice tematice @import url ("... /twentytwelve/style.css"); / \ / \ / \ / \ / \ / \ / \ / \ / \ / \ / \ / \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ / \ / \ / \ / \ / \ / \ / \ / \ / \ / \ 1. Diferite - Variabile - Mixe - Diverse 2. Navigare 3. Antet 4. Posturi 5. Pagini 6. Sidebar 7. Widgeturi 8. Subsol * / / * ------------------------------------------ ---------------------------- 1. Diferite * / // Variabile @ import "variablesless"; // Mixins @import "mixins.less"; // Misc @import "misc.less"; / * ------------------------------------------------ ---------------------- 2. Navigare * / @import "navigation.less"; / * ------------------------------------------------ ---------------------- 3. Antet * / @import "header.less"; / * ------------------------------------------------ ---------------------- 4. Mesaje * / @import "posts.less"; / * ------------------------------------------------ ---------------------- 5. Pagini * / @import "pages.less"; / * ------------------------------------------------ ---------------------- 6. Bara laterală * / @import "sidebar.less"; / * ------------------------------------------------ ---------------------- 7. Widgeturi * / @import "widgets.less"; / * ------------------------------------------------ ---------------------- 8. Footer * / @import "footer.less"; Acum că avem pe noi toți .Mai puțin fișiere create și toate acestea importate în nostru style.less fișier, vom dori să setați calea de ieșire din style.less în CodKit.
Ne-am referit la modul de a stabili rezultatele producției noastre .Mai puțin fișier în postul anterior.
Lucrul minunat despre folosirea mai puțină pentru crearea și compilarea CSS este că puteți alege ce format doriți să compilați. Aceasta înseamnă că puteți fie să o compilați în forma sa obișnuită, fie să vă minificați fișierele.
Este cu siguranta sugerat sa minimizezi toate site-urile tale .css fișiere. Cu cât fișierul este mai mic, cu atât site-ul dvs. va încărca mai repede. Doriți cea mai mică dimensiune a fișierului, deoarece fiecare pagină nu se va încărca și va fi văzută de utilizator până la .css fișierele sunt încărcate. Viteza de încărcare a paginii influențează, de asemenea, SEO-ul dvs..
Cu CodeKit, schimbarea setării pentru ieșirea dvs. pentru a minimiza este la fel de ușor ca schimbarea Stilul de ieșire la Minificat. Acum de fiecare dată când faceți o schimbare la oricare dintre dvs. .Mai puțin fișiere, CodeKit le va compila automat și le va minipi pe tema copilului tău style.css fişier.
Am trecut peste cele mai bune practici pentru structurarea dvs. .Mai puțin fișiere în tema sau tema copilului. De asemenea, am vorbit despre structura dosarului și locul în care să vă plasați .Mai puțin fișiere.
Te-am păstrat prin crearea tuturor .Mai puțin fișiere și a vorbit despre cum să le conectați pe toate style.less fișier utilizând importurile. În cele din urmă am vorbit despre unde să setați calea de ieșire a dvs. style.less fișier și cum să aveți CodeKit minify dvs. .Mai puțin atunci când se compilează.
De asemenea, am adăugat lessbuilt copil temă la GitHub, astfel încât să puteți fi furculiță sau să-l descărcați.
