Emmet (Zen Coding) pišemo brže HTML/CSS

Emmet je preimenovani projekat Zen coding. Emmet omogućava brzo generisanje HTML lista, blokova sa klasama i id pomoću skraćenica. Osim HTML-a, moguće je brzo pisati i CSS svojstva, takođe pomoću skraćenica. Na prvi pogled može delovati kao dodatni teret pamtiti još skraćenica i alata, ali kada se naviknete, teško je pisati kod bez Emmeta.

Mogućnosti Emmet (Zen coding)

Često treba napisati mnogo HTML koda, a što više koda treba napisati, veća je verovatnoća greške, npr. nezatvorenih tagova. U tome pomaže Emmet (Zen coding). Većina IDE podržava Emmet ili ima dodatak za njega; potrebno je samo postaviti prečicu za generisanje HTML koda.

Na primer, možete napisati:

div#content>h1+p

i pritiskom na prečicu Emmeta dobićete:

<div id="content"><h1></h1><p></p></div>

Vidite da pišemo jednostavne CSS selektore, a dobijamo HTML sa istom hijerarhijom.

Najkorisnija funkcija Emmeta je generisanje HTML menija. Na primer, kod:

div#header>img.logo+ul#nav>li*4>a

biće generisan kao:

Selektor * označava koliko elemenata treba generisati. Radi sa svim tagovima, ne samo sa <li>:

div.item$*3

Uz znak $ dobićete:

Vratimo se na meni i napišimo:

div#header>ul#navigation>li.item$*>a>span
О нас
Товары
Новости
Блог
Контакты

Ovaj kod generiše kompletan meni:

<div id="header">
<ul id="navigation">
<li class="item1"><a href=""><span>O nas</span></a></li>
<li class="item2"><a href=""><span>Proizvodi</span></a></li>
<li class="item3"><a href=""><span>Vesti</span></a></li>
<li class="item4"><a href=""><span>Blog</span></a></li>
<li class="item5"><a href=""><span>Kontakti</span></a></li>
</ul>
</div>

Možete koristiti različite tagove i sve što želite koristeći Emmet selektore:

• E — ime elementa (div, ul)
• E#id — atribut id elementa (<div id="">)
• E.class — atribut class elementa (<div class="">)
• E>N — ugnježdeni element
• E+N — susedni element
• E*N — generiše N elemenata
• E$*N — generiše N elemenata sa numerisanim klasama (ul#nav>li.item-$*5)

Većina popularnih IDE podržava Emmet (Zen coding), ali ako koristite Notepad++, moraćete ručno da instalirate Emmet.

Instalacija Emmet (Zen coding) u Notepad++

Plugin možete preuzeti sa:

http://sourceforge.net/projects/npppythonscript/files/

Dodajte Emmet (Zen coding) biblioteku u Notepad++ folder.

Instalaciju biblioteke izvršite koristeći ugrađeni menadžer pluginova:

Iz liste označite "Zen Coding - Python" i kliknite na Install.

Ako nema Zen Coding plugina na listi, vaša verzija Notepad++ ne podržava ovaj plugin. U tom slučaju, instalirajte stariju verziju koja podržava Zen Coding ili sačekajte da izađe verzija za vašu verziju Notepad++.

Nakon restartovanja Notepad++, plugin je spreman za korišćenje. Da biste generisali kod, pritisnite Ctrl + Alt + Enter. Na primer, za generisanje:

<a href="" class="link"><span></span></a>

upisujete a.link>span i pritisnete Ctrl + Alt + Enter.