Nem érti az előfeldolgozó próbálja zen kódolás

Az internet tele van érvek és viták a előfeldolgozó. Ezek rendkívül hasznos eszközök nagyban egyszerűsíti kód fejlesztési folyamat felgyorsítása, és hogy ez könnyebben elérhető, hogy a későbbi modernizálás, de ugyanakkor nem mindenki számára. Ön ismeri a preprocessors, akár nem, meg kell ismernie a régi kedvenc, amely segít jelentősen csökkenti a szükséges időt, hogy olyan kódot anélkül, hogy kitaláljon valami új megközelítések és használata további fordítóprogramok. Ma beszélünk Zen Coding.

A Zen Coding írhat egy kicsit, és még mindig a nagy eredmény (durván, mint abban az esetben a C előfeldolgozó vagy Haml Jade, de csak itt akkor azonnal kap mindenki kedvenc HTML-kód). Azok számára, akik nem ismerik ezt a fogalmat általában beszélünk egy kicsit a munka Zen Coding, és valamennyire a módját annak használatát, majd összefoglalni az összes ezt a gyors útmutató, hogyan kell beállítani Zen Coding és annak alkalmazása a Sublime Text 2 példa.

Zen Coding VS Preprocessors

Kezdjük azzal, hogy meghatározzák, milyen Zen Coding nem: nem egy makró, abban az értelemben, amelyben látjuk KEVESEBB, Sass, Stylus, Jade, Haml és így tovább. Bár van hasonlóság. Mint minden ilyen eszköz, a Zen Coding egyedi szintaxis, amelynek célja a folyamat egyszerűsítése fejlődését HTML-kód és CSS.

Azonban, eltérően más eszközökkel, Zen Coding nem számol fel semmilyen különleges funkciók, mint a változók vagy nyálkahal, és nem igényel semmilyen további fájlokat, amelyeket meg kell áthalad a fordító. Zen Coding kiadási ad kész HTML és CSS és senki nézi a kódot „belül” nem lehet meghatározni, hogy már használt a fejlesztését.

Lehet, hogy egy közelebbi párhuzam a TextExpander - olyan alkalmazás, amely „tágul” rövid szövegrészek nagy. Általában Zen Coding - olyasmi, mint egy hatalmas előre definiált makrók bővíteni a szöveget, kifejezetten programozók HTML és CSS.

Hogyan működik ez?

Elég egy magyarázatot, kezdjük a figyelmet a szintaxis Zen Coding. Ha ismeri a HTML, CSS és DOM koncepció, akkor biztosan fogja meg mindent menet közben.

Kezdjük a HTML, úgy tűnik számunkra, hogy pontosan ez az igazi előnye. Mivel az első példa az alapokat, tegyük fel, hogy létre kell hoznunk egy egyszerű div azonosítóval tartályba. Mi ezt az alábbiak szerint:

Ha ismeri Haml. Rögtön észre, hogy van néhány használt hasonló megközelítések. Először is, van hozzá a szükséges számunkra az elem nevét, ebben az esetben, div, majd CSS-szerű szintaxis végrehajtani a hashtag, hogy meghatározzák a kezelés az azonosító. Végül folytatta a hashtag a szöveget, amit meg kell kötni ID: «tartály».

Mint látható, mi „cut off” a szükséges kódot közel fele a fenti folyosón. Itt nem kell aggódnia néhány nyitó vagy záró zárójel. Ezzel szemben, a szerkezet továbbra is a lehető legegyszerűbb.

Tudjuk használni ezt a tudást, mint a kiindulási pont, hogy más hasonló kódrészletek. Például tegyük fel, hogy létre kell hoznunk egy bekezdés elem az adott osztályban. A szintaxis nagyon hasonló, csak az osztály definíciója, az általunk használt időszak (ismét, mint a CSS).

Láncok, és a hozzá kapcsolódó gyermek elemek

Mentése bizonyos mennyiségű karaktert tud segíteni, de ha olyan komoly fejlesztő, amely kiírja az összes ezt a kódot egy álom egy kicsit? Will Zen Coding hasznos, mert így a fejlesztők?

A válasz természetesen az, hogy „igen”. Tény, hogy a bonyolultabb a szerkezete a kódot, annál hasznosabb, és Zen Coding! Minden hatalom van az a képesség, hogy összekapcsolja a különböző elemek.

Mint látható, ez elég könnyű létrehozni, mint a gyermek elemek és rokon, és az egész szintaktikai Zen Coding. Pontosabban, abban az esetben a CSS-mintázat kapcsolódó elemek vannak csatlakoztatva a + jel, és egy gyermek elemet használunk szimbólum>.

Bár, akkor valószínűleg nagyon szeretem a funkcionalitás dolgozni CSS Zen Coding. Nézzünk egy példát a munka:

Mint látható, a CSS alkalmassága általában jelent a tény, hogy beírjuk a kezdőbetűi kettőspont követi a végén, majd az értékeket alkalmaznak a paramétert. Valószínűleg már sejtette, hogy a szempontból CSS, sokkal nehezebb megjegyezni a beállításokat, hanem a HTML. Ne felejtsd el használni a kiságy.

Kedvenc HTML-makró

Gyermekágy Zen Coding is megzavarja, mert az információk mennyisége, így fokozatosan ismerkedhetsz a technológiát, hadd mutassam be a kedvenc makrókat.

Szeretne kezdeni egy új HTML-dokumentum tiszta lappal? Egyszerűen adja «html: 5„, és akkor nem kell bajlódnia többé!

Ahogy kezdődik, hogy dolgozzon ki egy új HTML-fájlt, akkor valószínűleg szeretne csatolni CSS. Szerencsére, ez lehet tenni nagyon gyorsan.

Ismét az elem a fedelét a dokumentumban. Miután beállította az CSS, biztosan van egy vágy, hogy döntetlen j # 097; vascript.

Az első kérdés, hogy mi jutott eszembe kapcsolatos Zen Coding, ez volt: „Hogyan működik a referencia?» Haml elég kényelmetlen használni, amikor a néhány sort elem és attribútumok, és így ez a kérdés, hogy van egy kicsit aggódik.

Azonban ahelyett, hogy kínálnak nekünk egy bonyolult rendszer bevezetése hivatkozások a szövegben, az eszköz kínál nekünk egyszerűen írja «a» majd horgonyt a szerkezet kész annak érdekében, hogy töltse ki. Lehet, hogy ez nem sokkal jobb, de legalább nagyon könnyen megjegyezhető.

Zen Coding kínál nekünk egy nagyon kényelmes funkció elemei reprodukció, amely lehetővé teszi számunkra, hogy könnyen teremt egy bizonyos számú specifikus elemeket. Ismét a folyamat nagyon intuitív, akkor csak meg kell használni a karakter „*” és a kívánt számot.

Egy másik nagyon jó trükk, hogy lehet alakítani a tenyésztés elemek - bevezeti az egyedi minták száma egy osztály vagy azonosító értéket. Ehhez csak meg kell használni a szimbólum „$”.

Hogyan, hogy működik?

Zen Coding Állítsa be Sublime szöveg 2

Ehhez szüksége lesz letölthető az ingyenes Sublime csomag vezérlők Will Bond (Will Bond). Ez egy kiváló Configuration Manager, amely leegyszerűsíti a folyamatot keres és telepít plugins Sublime szöveg.

Ha be van állítva, nyomja meg a Ctrl + Shift + P, és mielőtt pop up table csapatok - a belép telepítés szükséges. Látni fogja a tétel «csomag ellenőrzés: Install Package», ezt a lehetőséget meg kell nyomni az Enter billentyűt.

Ebben a szakaszban, akkor meg kell adni a «Zen Coding» és akkor lesz a rendelkezésre álló eszközök. Csak nyomja meg ismét, és a berendezés telepítésre kerül (újraindítás, ha nem történik semmi). Hozzon létre egy új HTML-dokumentum, adja meg a rövidítést, nyomja meg a Tab gombot, és figyelje a mágikus (győződjön meg róla, hogy a szintaxis van kitéve HTML, különben nem fog működni).

Használnak Zen Coding?

Annak érdekében, hogy őszinte legyek, mi hiányzott egy kis Zen Coding csúcs pár évvel ezelőtt. Mindig úgy érezte, hogy az integráció Espresso sokkal jobb, ezért mindig használja az eszközt, és soha nem próbálta, hogy tanulmányozza a Zen Coding külön-külön. Most, amikor áttért a Sublime szöveg, amit kezdetben sokkolta hogyan Zen Coding könnyebb dolgozni összetett HTML-struktúrákat.

Mit gondol erről? Függetlenül attól, hogy Zen Coding a munkájuk során? Szívesebben ezt az eszközt preprocessor? Hogyan működnek a CSS? Mit gondolsz, a Zen Coding nagyban segíti a munka a CSS?