Emmet, ranije poznat kao Zen Coding, jedan je od najboljih alata koji bi trebao povećati produktivnost dok kodirate HTML ili CSS. Djeluje kao kodiranje, ali je snažnije i nevjerojatnije. U mogućnosti je automatizirati vaš HTML / CSS od jednostavnog oblika do složenog.
Emmet nudi dobru podršku za uređivanje teksta ili IDE (integrirano razvojno okruženje) kao što su Dreamweaver, Eclipse, Sublime Text, TextMate, Expresso, Coda, zagrade, Notepad ++, PHPStorm i još mnogo toga. Također podržava online alat za uređivanje poput JSFiddle, JSBin, CodePen, IceCoder i Codio .
Način rada Emmet-a je upisivanjem tipke tipkovnice na kartici kada se završi sintaksa pisanja. Slijede najčešći Emmetovi simboli koje možete koristiti. Da biste ih vidjeli na djelu, nastavite čitati.
Emmet - HTML Najbolji trikovi
Zapanjit ćete se kad pišete HTML s Emmetom kao što sam i učinio. Kao što je već rečeno, Emmet može skratiti jednostavan HTML na vrlo složen. I oni su napisani samo na jednom retku koda. Prema zadanim postavkama, ako skratite ime nepoznate oznake, Emmet će automatski napisati oznaku koju pišete. Pogledajte animaciju ispod kako biste je razumjeli.
1. Gniježđenje
Za gniježđenje nekih elemenata samo trebate dodati veći znak > nakon svake oznake koju želite koristiti. Na primjer, kada želim imati header s nav, div, ul i li unutar ja samo trebam upisati header>nav>div>ul>li i tipku hit tab.
2. Sibling
Ako ne želite ugnijezditi svoje elemente, jednostavno možete upotrijebiti znak plus plus oznake koje želite dodati. Primjerice, header+section+article+footer dat će drugo mjesto za header, section, article i footer .
3. Popnite se gore
Kada se nalazite u podređenom elementu i želite imati drugi element izvan tog djeteta, lako se možete popeti na jedan element s znakom ^ . Ako ga upišete dvaput, tada ćete se penjati dvostrukim elementom i tako dalje. Na primjer, ako upišete header>div>h1>nav imat ćete nav element još uvijek unutar h1. Da biste je izvukli, zamijenite posljednji znak > .
4. Dodajte klasu
Emmet također može uključiti vaše željeno ime klase unutar oznake. Znak koji ćete koristiti je isti kao i klasični selektor u CSS-u koji je točka . znak. Na primjer, ako želim imati div s .container klasom, h1 s .title i nav s .fixed, onda moram napisati div.container>header>h1.title+nav.fixed .
Ako želite imati više od jednog razreda, upišite svoju dodatnu klasu nakon prve klase zajedno s točkom . znak. Primjer: div.container.center će proizvoditi ,
5. Dodajte ID
Osim klase, možete dodati ID unutar oznake s znakom # . Korištenje je isto kao i dodavanje klase, ali ne možete upisati dvostruki ID unutar njega. Ako to pokušate, Emmet će pročitati samo posljednji ID koji unesete.
6. Dodajte tekst
Emmet nije toliko jednostavan koliko samo skraćuje neke oznake, čak možete dodati i redak teksta. Da biste dodali neki tekst, samo trebate omotati tekst s znakom uvijene zagrade {} . Ne morate dodati veći > znak jer će tekst automatski biti dodan unutar oznake.
7. Dodajte svojstvo
Ako želite dodati drugi atribut osim klase i id, samo mjesto atribut želite dodati unutar zagrada [] znak. Na primjer, želim imati sliku koja ima logo.png izvor s logotipom alt, tako da samo img[src="logo.png"] .
8. Grupiranje
Kada želite imati element s višestrukim ugniježđem, grupiranje s znakom () pomoći će vam da to lako postignete. Primjerice, želim imati spremnik koji ima zaglavlje s h1 i nav unutar i drugi dio izvan zaglavlja, jednostavno ću napisati: .container>(header>h1+nav.fixed)+(section>.content+.sidebar) .
9. Množenje
Ova značajka može postati jedna od vaših omiljenih iz Emmeta. Kao i kod množenja, možemo pomnožiti bilo koji element onoliko koliko želimo. Da biste ga koristili, jednostavno dodajte znak zvijezde * nakon elementa koji želite pomnožiti i dodati broj elementa. Na primjer, želim napisati 5 li stavku unutar ul, onda je prava sintaksa ul>li*5 .
10. Automatsko numeriranje
Automatsko numeriranje pomoći će vam da lako napišete drugo ime s povećanim brojem. Prava sintaksa za ovu značajku je znak $ dolar. Automatsko numeriranje najbolje se koristi s množenjem. Primjerice, želim dodati prethodnu stavku li s klasom od točke 1 do stavke item5 . Dakle, samo moram dodati dodatni naziv klase znakom dolara: ul>li.item$*5 .
11. Lorem
Ako ste nekada pisali neki lažan tekst otvaranjem lipsum generatora kao što je lipsum.com, s Emmetom to više ne morate raditi. Emmet također podržava dummy generator teksta s lorem ili lipsum sintaksom. Također možete odrediti koliko dugo će tekst postati. Na primjer, želim imati neki tekst s 10 riječi, onda ću upisati lorem10 .
12. Automatski dokument
Kada pokrećete novi projekt, umjesto pisanja HTML strukture ručno ili kopiranjem lijepljenja iz drugih resursa, Emmet to može učiniti bolje za vas. Sve što trebate učiniti je tipkanje uzvičnika ! znak, pogodak i čarolija. To će za vas generirati strukturu HTML5 dokumenta, ako umjesto toga želite koristiti HTML4, a zatim upišite html:4t .
13. Veza
Ako imate favicon, rss ili vanjsku CSS datoteku koju želite dodati dokumentu, možete koristiti trikove za povezivanje da biste ih brže zapisivali. Da biste uključili ikonu favicon, upišite link:favicon i generirat će vam favicon vezu s zadanim imenom datoteke favicon.ico . A za css, link:css će vam generirati CSS link sa zadanim stilom style.css . RSS će biti rss.xml kao zadani naziv.
Možete ih kombinirati sa znakom plus + za generiranje bržih resursa.
14. Sidro
Prema zadanim postavkama, kada upišete oznaku, a zatim kliknete karticu, dobit ćete potpunu oznaku s atributom href . No, možete dodati vrijednost // ako je kombinirate s vezom za primjer a:link . Ako umjesto toga želite imati vezu e-pošte, upotrijebite a:mail .
15. Pametno preskakanje
Posljednji HTML trikovi koje ću vam dati je značajka pametnog preskakanja. U osnovi, nemate pisati ime oznake kad želite imati klasu ili id unutar njega. To vrijedi samo za neke određene uvjete.
Prvo, ako želite imati div s ID-om ili klasom unutra, ne morate napisati naziv oznake, samo izravno upišite id ili simbol klase zajedno s njegovim imenom.
Drugo, kada se nalazite unutar ul oznake, preskočite pisanje oznake li ima klasu ili id.
I posljednji se primjenjuje unutar table oznake. Možete preskočiti pisanje tr i td oznaka ako imaju klasu ili id i Emmet će ih automatski dodati za vas.
Emmet - Najbolji CSS trikovi
Nakon što naučite neke HTML trikove, sada je vrijeme za CSS. Neki od uobičajenih simbola prikazanih na vrhu slike neće raditi s CSS-om. Oni su veći > i uspinju se ^ simbolima. Ako ih koristite, oni će proizvesti baš kao i plus + simbol. Dakle, krenimo.
1. Širina i visina
Definiranje width i height s Emmetom je vrlo jednostavno. Vi samo trebate napisati prvu riječ, a zatim veličinu koju želite dodati. Prema zadanim postavkama, ako ne navedete jedinice, Emmet će ih generirati s px jedinicom. Simbol raspoložive jedinice je postotak % i em .
2. Tekst
Postoje neki jednostavni simboli svojstva teksta i generirat će se sa zadanom vrijednošću. ta će generirati text-align s left vrijednošću, td će biti text-decoration none vrijednosti i tt će postati text-transform s uppercase .
3. Pozadina
Da biste dodali pozadinu, jednostavno koristite kraticu bg . Možete ga kombinirati s bgi da biste dobili background-image, bgc za background-color i bgr za background-repeat . Također možete napisati bg+ da biste dobili potpuni popis svojstava pozadine.
4. Face Font
Znak plus nije primjenjiv samo za pozadinu. Za @font-face možete jednostavno napisati @f+ za potpuni popis svojstava @font-face . Ako upišete znak @f bez znaka plus, dobit ćete samo osnovno @font-face .
5. Razno
Drugi veliki trikovi su skraćivanje pisanja animation s animation tekstom. Ako dodate minus - znak, dobit ćete animacijsko svojstvo s punom vrijednošću. Tu je i @kf tekst koji će proizvesti potpuni popis @keyframe .
Zaključak
Emmet je vrlo veliki alat za uštedu vremena koji pojednostavljuje vaš razvojni proces. Ako samo znate Emmeta, sada nije kasno da ga isprobate. Ti trikovi su samo neke od Emmetovih značajki. U Emmetu ima mnogo drugih simbola i sintakse, posebno za CSS. Samo se zaputite Emmetovim dokumentima ili varajte list za daljnje čitanje.
