Share
Mi se pare deosebit de interesant atunci când alți dezvoltatori își împărtășesc sfaturile și trucurile cu fluxul de lucru. Poate fi foarte util să faceți un vârf de strălucire în lumea de dezvoltare a altcuiva și să aflați ce instrumente folosesc pentru a-și ușura viața.
Ei bine, astăzi vă voi arăta o parte din propriul flux de lucru - în special cum să utilizați Sass și Compass atunci când dezvoltați o temă WordPress. În loc de a explica pur și simplu configurația și instrumentele necesare, m-am gândit că ar fi mai bine să începeți de la zero și să vă arătați exact ce este necesar pentru a merge atunci când dezvoltați o temă WordPress care utilizează Sass și Compass.
Sper că acest articol sună interesant pentru dvs. și aștept cu nerăbdare să vă împărtășesc o mică parte din fluxul de lucru cu dvs. Vă încurajez să faceți același lucru.
După multă experimentare, acesta este cel mai bun instrument pentru suportul Sass și Compass încrucișat. Aceasta este o aplicație cu bare de meniu care poate compila fișierele Sass în CSS (de asemenea, are live-reload). Nu este gratuit, dar la 10,00 $ am găsit-o mai mult decât merită.
În scopul oferirii unei soluții pentru toate cititorii, indiferent de platformă, acest tutorial va oferi o configurație pentru aplicația menționată mai sus. Există, desigur, alte alternative, dar trebuie să știți că lucrurile pot avea nevoie de o configurație puțin diferită de ceea ce vedeți aici.
_S temă este o temă mai puțin potrivită pentru dezvoltatori. Așa cum sa afirmat pe site-ul lor "Sunt o temă destinată hacking-ului, deci nu mă folosești ca temă părinte". - Sună perfect pentru noi. Folosiți comanda "Generați" pe pagina de pornire pentru a descărca o construcție particularizată. Puteți pur și simplu descărca tema direct de la GitHub, dar atunci va trebui să căutați manual toate instanțele de _S în cadrul temei și înlocuiți-le cu propriul prefix. Folosind "Generați" faceți acea parte pentru dvs. automat.
Odată ce ați descărcat personalizat, dezarhivați directorul tematic wp-content / teme. Pentru acest tutorial am folosit generatorul pentru a crea tema wp-Tuts iar structura directorului ar trebui să arate astfel:
Acum puteți merge și activați tema din panoul Admin.
În directorul rădăcină al temei, vom avea un dosar numit Sass. Aici ne vom pune pe toti .SCSS fișiere. Compass.app va urmări acel director și va compila totul în single style.css fișier care trăiește în rădăcina temei.
Acestea sunt setările care vor funcționa bine cu WordPress:
/ * config.rb în rădăcina temei. * / css_dir = "/" sass_dir = "sass" output_style =: comprimat
Bine, avem pe noi Sass dosarul nostru config.rb ambele așezate în rădăcina temei noastre. Suntem acum pregătiți să distrugem fișierul CSS al temei și să creăm fișiere individuale care vor fi mai ușor de construit / menținut în viitor.
Unul dintre avantajele folosirii oricărui preprocesor CSS este capacitatea de a împărți CSS-ul nostru în multe fișiere mici. Acest lucru ne ajută foarte mult fluxul de lucru, deoarece ne putem organiza codul în bucăți legate de care este mai ușor de întreținut și de utilizat. Deci, în loc să avem totul înghesuiți într-un fișier CSS gigantic, putem avea un fișier separat, care este doar pentru resetărilor. Apoi am putea avea și un fișier separat, care se ocupă numai de meniul, un fișier pentru mass-media, etc etc. Putem avea la fel de multe .SCSS fișiere după cum ne place și, după compilare, toate acestea vor fi comprimate în jos într-un singur style.css.
Dacă te uiți la style.css fișierul care este livrat împreună cu tema pe care am descărcat-o, veți vedea că autorul a trimis comentarii pentru a separa conținutul în secțiuni precum:
/ * = Conținut ---------------------------------------------- - * / .sticky .hentry marja: 0 0 1.5em;
Vom folosi acele comentarii ca un ghid pentru ruperea acestei foi de stil separate .SCSS fișiere.
În cadrul Sass director, creați un fișier numit style.scss - Acesta este fișierul pe care îl vom folosi pentru a importa toate celelalte fișiere. De asemenea, acesta este singurul SCSS fișier care NU va fi prefixat cu o subliniere ("_"). Acest lucru spune compilatorului nostru că acest fișier ar trebui să fie convertit într-un fișier CSS real.
Acum treceți prin style.css fișier și pentru fiecare secțiune comentată, creați un fișier nou în Sass care este prefixat cu o subliniere și are extensia de fișier .SCSS. Copiați conținutul acelei secțiuni în fișierul nou creat.
De exemplu, unde vedeți acest lucru în style.css, ați crea un fișier numit _navigation.scss și a pus-o în cadrul Sass pliant:
/ * = Navigare ---------------------------------------------- - * / .site-content [clasa * = "navigare"]] marja: 0 0 1.5em; overflow: ascuns; [clasa * = "navigare"] .precedent float: left; lățime: 50%; [clasa * = "navigare"] .next float: right; text-aliniere: drept; lățime: 50%; / * Încetează a fi sass / _navigation.scss * /
După ce treceți prin întreaga foaie de stil, dvs. Sass directorul ar trebui să arate așa. (observa asta style.scss este singurul fișier care nu este prefixat cu un subliniere, orice altceva este considerat a fi parțial, și nu vor fi compilate într-un fișier CSS separat.)
Acum, că am pus toate CSS în fișiere separate SCSS, acum trebuie să le importăm în style.scss fișier și, de asemenea, adăugați informațiile despre temă.
/ *! Tema Nume: wp-tuts Tema URI: http://underscores.me/ Autor: Underscores.me Autor URI: http://underscores.me/ Descriere: Descriere Versiune: 1.0 Licență: GNU URI de licență publică generală: licență. txt Etichete: * / @import "reset"; @import "global"; @import "meniu"; @importați "conținut"; @import "aside"; @importați "media"; @import "navigare"; @import "comments"; @import "widget-uri"; @import "scroll";
Asigurați-vă că aceste fișiere sunt importate în aceeași ordine în care CSS a apărut în documentul original. Puteți vedea că începem restabili și adăugați restul în ordinea corectă. Totuși, trebuie să vă gândiți la ordinea în care sunt definite regulile în CSS finală!
Important: De asemenea, rețineți că semnul exclamării (
Accentsconagua
!) pe prima linie. Acest lucru spune compilatorului nu să eliminăm acest comentariu important. Trebuie să facem acest lucru, deoarece mai devreme am stabilit opțiunea output_style =: comprimat (în config.rb fişier). Aceasta înseamnă că toate spațiul alb și comentariile vor fi eliminate din versiunea compilată. Acesta este un lucru minunat și cu siguranță doriți ca acest lucru să se întâmple - dar nu aici! Dacă acest comentariu a fost eliminat de compilator, atunci WordPress nu ar recunoaște această temă. Am făcut toată munca manuală, acum este momentul să aducem automatizarea în joc. Continuați și ștergeți style.css fișier din rădăcina temei, deoarece nu mai avem nevoie de ea. Acum, dacă ați urmat cu succes toți pașii de mai sus, atunci ar trebui să vă puteți deschide Compass.app și alegeți Vizionați un dosar. Selectați directorul rădăcină al temei (în cazul nostru, este wp-Tuts dosar în interiorul wp-content / teme)
După o întârziere foarte scurtă, ar trebui să vedeți un nou style.css fișierul care a fost generat. Deschideți-l și ar trebui să vedeți o versiune miniatură. Acesta este un indiciu că totul a funcționat așa cum era de așteptat.
În acest moment, am transformat baza CSS a temei în bucăți mici, ușor de gestionat și acum ne vom uita la utilizarea Compass cu proiectul nostru.
Compasul este un cadru care oferă o mulțime de caracteristici puternice pentru a vă ușura viața atunci când creați CSS. Pentru că noi folosim Compass.app, putem aduce funcționalitatea oferită de Compass prin importul pur și simplu a modulului necesar în cadrul nostru style.scss fişier. De exemplu, dacă doriți modulele CSS3 ale Compass, faceți acest lucru:
/ * Faceți acest lucru primul import pe care îl faceți, atunci va fi disponibil pentru toate fișierele. * / @import "compass / css3";
Asta-i cu adevarat, acum te poti indrepta spre site-ul Compass si cand esti pregatit sa folosesti oricare din caracteristicile sale in proiectul tau, vei sti exact cum sa o faci.
Aveți acum tot ce aveți nevoie pentru a începe să utilizați Sass și Compass când construiți teme în WordPress. Apoi, vom arunca o privire la câteva exemple foarte simple de utilizare a acestora și în timp ce acest tutorial este nu o introducere la Sass și Compass, exemplele de mai jos ar trebui să ajute începătorii să recunoască în continuare beneficiile utilizării unui pre-procesor CSS.
Pe măsură ce acum folosim puterea unui procesor pre-procesor, putem fi mai eficienți atunci când scriem CSS și evităm să ne repetăm. Unul din lucrurile pe care le am în fiecare proiect WordPress este a _vars.scss fișier în care aș păstra orice lucru specific proiectului în variabile. În acest fel, mă pot referi la numele variabilelor în multe fișiere și ar trebui să schimb ceva, aș fi trebuit să o fac într-un singur loc.
/ * Exemplu de tipuri de lucruri pe care ar trebui să le puneți în _vars.scss * / $ brand-color: # 56483B; $ default-padding: 24px;
Pentru a le utiliza în toată colecția dvs. de .SCSS fișiere, doar @import seamănă cu orice alt dosar style.scss, dar asigurați-vă că este primul sau imediat după restabili ar fi ok, de asemenea. După ce ați importat-o, utilizați variabilele de genul:
/ * În orice fișier importat după _vars.scss, puteți utiliza toate variabilele dvs. * / .logo color: $ brand-color
Adesea, mulți oameni vor folosi doar Compass pentru abilitățile sale de prefixare a vânzătorului. Mă înscriu singură în această categorie și iată un mic exemplu pentru a arăta de ce:
/ * Fără Compass * / * -moz-box-size: box-border; -webkit-box-size: caseta de frontieră; box-size: caseta de margine; / * Cu Compass * / * @ include dimensiunea casetei (caseta de margine);
Sper că acest tutorial a fost de ajutor în a arăta un flux de lucru simplu, dar eficient, atunci când utilizați Sass și Compass în WordPress. Cele două exemple pe care le-am dat la sfârșit sunt: absolut de bază de a utiliza Sass și Compass și ar trebui să vă uitați în ambele părți pentru a le folosi pe deplin.
Spunând asta, veți îmbunătăți în continuare fluxul de lucru cu ceea ce ați învățat aici. Folosind aceste instrumente pentru a împărți CSS în fișiere mici, folosind variabilele pentru a reduce repetarea și a elimina necesitatea de a introduce prefixele furnizorilor - vă aflați pe calea unui flux de lucru mai bun pentru dezvoltare.
