Internetul este plin de discuții și discuții pe tema preprocesorilor. Aceste instrumente monstruoase convenabile simplifică foarte mult procesul de dezvoltare a codului, îl accelerează și îl fac mai accesibil pentru upgrade-urile ulterioare, dar, adevărat, nu pentru toată lumea. Sunteți familiarizat cu preprocesoare sau nu, ar trebui să fie familiarizat cu favorit vechi, care vă ajută să reduceți semnificativ timpul necesar pentru a dezvolta cod fără a fi nevoie de a inventa unele abordări noi și utilizarea de compilatoare suplimentare. Astăzi vom vorbi despre codificarea Zen.
Cu Zen Coding puteți scrie destul de un pic și încă obține rezultatul vrac (aproximativ, la fel ca în cazul preprocesorul C sau Haml Jade, dar numai aici puteți obține imediat favorit HTML-cod tuturor). Pentru cei care nu sunt familiarizați cu acest concept, în general, vorbim un pic despre activitatea Zen codificare a mărfurilor, și oferă unele dintre modalitățile de utilizare a acestuia, și apoi rezuma tot acest ghid rapid cu privire la modul de configurare Zen de codificare a mărfurilor și aplicarea acesteia în Sublime Text 2 exemplu.
Zen codificare VS Preprocessors
Să începem cu faptul că a determina ce Zen Coding nu este: nu un macro, în sensul în care vom vedea mai puțin, Sass, Stylus, Jade, Haml și așa mai departe. Deși există aici asemănări. Ca toate aceste instrumente, codarea Zen are o sintaxă unică, concepută pentru a simplifica procesul de dezvoltare a codului HTML și a CSS.
Cu toate acestea, spre deosebire de alte instrumente, Zen Coding nu adaugă proprietăți speciale, cum ar fi variabilele sau mixurile, și nici nu necesită transmiterea de fișiere suplimentare prin compilator. Zen Codificarea pe ieșire oferă codurile HTML și CSS deja pregătite și nimeni, văzând codul "din interior", va fi capabil să determine ce ați dezvoltat.
Poate că se poate face o paralelă mai apropiată cu TextExpander - o aplicație care "extinde" pasaje scurte de text în mari. În general, codarea Zen este ceva asemănător unui set imens de macrocomenzi pregătite pentru extinderea textului, concepute special pentru codoarele HTML și CSS.
Cum funcționează?
Destul de explicația, să ajungem la sintaxa codului Zen. Dacă sunteți deja familiarizat cu HTML, CSS și conceptul DOM, atunci sunteți sigur de a apuca totul în zbor.
Să începem cu HTML, deoarece ne pare că acesta este avantajul real. Fiind primul nostru exemplu de bază, să presupunem că trebuie să creăm un simplu div cu un container de identificare. Vom face acest lucru după cum urmează:
Dacă sunteți familiarizat cu Haml. apoi observați imediat că există mai multe abordări similare folosite aici. Mai întâi am introdus numele elementului de care aveam nevoie, în cazul nostru este un div, și apoi am folosit o sintaxă ca CSS pentru a implementa o hashtag pentru a determina referința la ID. În cele din urmă, am urmat hashtag-ul la textul însuși, pe care trebuie să-l legăm ID: "container".
Aparent, am "tăiat" codul necesar aproape la jumătatea drumului în acest pasaj. Aici nu ne putem face griji pentru unele paranteze de deschidere sau închidere. Dimpotrivă, structura ar trebui să rămână cât se poate de simplă.
Putem folosi aceste cunoștințe ca punct de plecare în alte fragmente de cod similare. De exemplu, să presupunem că trebuie să creăm un element de paragraf cu o anumită clasă. Sintaxa de aici este foarte asemănătoare, doar pentru a defini clasa pe care o folosim (și din CSS).
Lanțuri, elementele legate și elementele copilului
Salvarea unei anumite cantități de caractere vă poate ajuta, dar dacă sunteți atât de gravă ca dezvoltator, puteți imprima tot acest cod într-un vis într-o secundă? Codificarea Zen va fi folositoare pentru astfel de dezvoltatori?
Desigur, răspunsul este da. De fapt, cu cât este mai complexă structura codului dvs., cu atât mai utilă și va fi Codarea Zen! Toată puterea de aici constă în capacitatea de a conecta diferite elemente între ele.
După cum puteți vedea, este destul de ușor să creați atât elementele copil cât și cele conexe, toate acestea folosind sintaxa de codificare Zen. În mod specific, în cazul unui șablon CSS, elementele conexe sunt conectate utilizând simbolul +, iar caracterul> este utilizat împreună cu elementele copilului.
Deși, probabil, vă place foarte mult funcționalitatea de a lucra cu CSS în Codarea Zen. Să ne uităm la un exemplu de lucru:
După cum puteți vedea, funcția CSS înseamnă, de obicei, că începeți să introduceți inițialele cu un colon la sfârșit și apoi valorile care se aplică parametrului. Probabil că deja ați ghicit că din punctul de vedere al CSS există parametri mult mai complexi de reținut decât în HTML. Nu uitați să utilizați foi de înșelătorie.
Macroul HTML preferat
Crib Zen Coding vă poate stânjeni în vedere cantitatea de informații, astfel încât, astfel încât să puteți obține treptat să cunoască tehnologia, să ne prezentăm macro-urile noastre preferate.
Doriți să începeți un nou document HTML de la zero? Doar introduceți "html: 5", și nu mai trebuie să vă încurcați!
După ce începeți să dezvoltați un fișier HTML nou, probabil că veți dori să legați foi de stil cascadă. Din fericire, acest lucru se poate face foarte repede.
Din nou, elementul compartimentului capului documentului. După ce ați configurat CSS, probabil că veți dori să legați j # 097; vascript.
Prima întrebare pe care am venit în minte în ceea ce privește Coding Zen, a fost: „Cum de referință» Haml destul de incomod de utilizat atunci când este vorba de o parte a elementului de linie și atributele, și așa mai departe această problemă avem un pic îngrijorat?.
Cu toate acestea, în loc să ne oferiți o schemă complexă pentru introducerea de linkuri în text, instrumentul sugerează că pur și simplu introduceți "a" și după aceea structura ancorei este pregătită să o umpleți. Poate că nu este mult mai bine, dar cel puțin este foarte ușor să-ți amintești.
Zen Coding ne oferă o funcție foarte convenabilă de multiplicare a elementelor, ceea ce ne permite să creăm foarte simplu un anumit număr de elemente specifice. Din nou, procesul este foarte intuitiv, trebuie doar să utilizați simbolul "*" și suma necesară.
Un alt truc foarte bun, care poate fi rotit în timpul multiplicării elementelor, este de a injecta numărul incrementului în clasă sau la valoarea ID. Pentru a face acest lucru, trebuie doar să utilizați simbolul "$".
Cum funcționează?
Instalați codificarea Zen în text sublim 2
Pentru a face acest lucru, va trebui să descărcați Free Sublime Control Package de la Will Bond. Acesta este un manager de configurare excelent, care simplifică procesul de căutare și instalare a plugin-urilor în text sublim.
Imediat ce îl instalați, apăsați tastele CTRL + Shift + P și apare tabela de comenzi înainte de a le introduce - instalați-o în ea. Veți vedea elementul "Control pachet: Instalare pachet", această opțiune va trebui să apăsați pe Enter.
În acest stadiu, va trebui să introduceți "Zen Coding" și apoi veți fi disponibil în pachet. Apăsați din nou pe Enter și pachetul va fi instalat (reporniți sistemul dacă nu se întâmplă nimic). Crearea unui nou document HTML, introduceți abrevierea, apăsați tasta Tab, și urmăriți magia (asigurați-vă că sintaxa este expus la HTML, altfel nu va funcționa).
Folosești codificarea Zen?
Sincer, am ratat vârful Zen Coding cu câțiva ani în urmă. Întotdeauna am crezut că integrarea cu Espresso a fost mult mai bună și de aceea am folosit întotdeauna acest instrument și nu am încercat niciodată să învățăm separat Zen Coding. Acum, când am trecut la textul Sublime, am fost inițial șocați de modul în care Zen Coding simplifică munca cu structuri HTML complexe.
Ce crezi despre asta? Folosești codificarea Zen în proiectele tale? Preferați acest instrument pentru preprocesoare? Cum lucrați cu CSS? Crezi că Zen Coding ajută foarte mult cu CSS?
Trimiteți-le prietenilor: