Emmet, ki je bil prej znan kot Zen Coding, je eno najboljših orodij, ki jih morate imeti za povečanje produktivnosti, medtem ko kodirate HTML ali CSS. Deluje tako kot dokončanje kode, vendar je močnejši in neverjetnejši. Sposoben je avtomatizirati HTML / CSS od preproste oblike do zapletene.
Emmet nudi dobro podporo za urejevalnik besedil ali IDE (integrirano razvojno okolje), kot so Dreamweaver, Eclipse, Sublime Text, TextMate, Expresso, Coda, Brackets, Notepad ++, PHPStorm in še veliko več. Podpira tudi spletno orodje za urejanje, kot je JSFiddle, JSBin, CodePen, IceCoder in Codio .
Način delovanja Emmeta je, ko vnesete sintakso s tipkovnico tipkovnice. Spodaj so najpogostejši Emmetovi simboli, ki jih lahko uporabite. Če jih želite videti, nadaljujte z branjem.
Emmet - HTML najboljši triki
Presenečeni boste, ko pišete HTML z Emmetom, kot sem jaz. Kot smo že omenili, lahko Emmet skrajša preprost HTML na zelo zapleten. In napisana so samo na eni vrstici kode. Če skrajšate ime neznane oznake, bo Emmet samodejno napisal oznako, ki jo pišete. Za lažje razumevanje si oglejte spodnjo animacijo.
1. Gnezdenje
Če želite ugnezditi nekaj elementov, morate po vsakih oznakah, ki jih želite uporabiti, dodati večji znak > . Na primer, ko hočem imeti header z nav, div, ul in li znotraj moram vtipkati header>nav>div>ul>li in tipko hit tab.
2. Otrok
Če ne želite, da bi gnezdili elemente, lahko preprosto uporabite znak plus + mu sledijo oznake, ki jih želite dodati. Na primer, header+section+article+footer bo dala drug kraj za header, section, article in footer .
3. Vzpenjati se
Ko ste v podrejenem elementu in želite imeti drug element zunaj tega otroka, se lahko preprosto povzpnete navzgor z enim znakom z znakom ^ . Če jo vnesete dvakrat, se boste dvignili z dvojnim elementom in tako naprej. Na primer, če vnesete header>div>h1>nav, boste imeli nav navalni element še v notranjosti h1. Če ga želite odstraniti, zamenjajte zadnji znak z znakom ^ .
4. Dodajte razred
Emmet lahko vključi tudi vaše želeno ime razreda znotraj oznake. Znak, ki ga boste uporabili, je enak kot izbirnik razredov v CSS-ju, ki je pika . znak. Na primer, če želim imeti div z razredom .fixed, h1 z .title in nav s .fixed, potem moram napisati div.container>header>h1.title+nav.fixed .
Če želite imeti več kot en razred, vnesite dodatni razred po prvem razredu skupaj s piko . znak. Primer: bo izdelal div.container.center .
5. Dodajte ID
Poleg razreda lahko v oznako dodate tudi ID s znakom # . Uporaba je enaka kot pri dodajanju razreda, vendar ne smete vnesti dvojnega ID-ja. Če poskušate to storiti, bo Emmet samo prebral zadnji ID, ki ga vnesete.
6. Dodajte besedilo
Emmet ni samo tako preprost, kot samo skrajšati nekatere oznake, lahko celo dodate besedilo znotraj. Če želite dodati nekaj besedila, morate samo zaviti besedilo z znakom kodne podlage {} . Ni vam treba dodati večjega znaka, ker bo besedilo samodejno dodano znotraj oznake.
7. Dodajte atribut
Če želite poleg razreda in id dodati še en atribut, samo atribut place, ki ga želite dodati znotraj znaka oklepaja [] . Na primer, želim imeti sliko, ki ima logo.png vir z logotipom alt, zato vnesem samo img[src="logo.png"] .
8. Združevanje
Če želite imeti element z večkratno gnezdeno notranjostjo, jih združite z znakom () s čimer boste to lažje dosegli. Primer, želim imeti zabojnik, ki ima glavo s h1 in nav navznoter in drug del zunaj glave, bom preprosto napisal: .container>(header>h1+nav.fixed)+(section>.content+.sidebar) .
9. Množenje
Ta funkcija lahko postane ena izmed vaših najljubših iz Emmeta. Tako kot pri množenju lahko vsak element pomnožimo toliko, kot si želimo. Če ga želite uporabiti, preprosto dodajte znak zvezdico * za element, ki ga želite pomnožiti in dodajte številko elementa. Na primer, hočem pisati pet elementov znotraj ul, potem je prava sintaksa ul>li*5 .
10. Samodejno oštevilčevanje
Samodejno oštevilčevanje vam bo pomagalo zlahka napisati drugačno ime z večjim številom. Pravilna skladnja za to funkcijo je znak dolarja $ . Samodejno oštevilčenje je najbolje uporabiti z množenjem. Na primer, želim dodati moj prejšnji element li z razredom od item1 do item5 . Zato moram dodati še dodatno ime razreda z znakom dolarja: ul>li.item$*5 .
11. Lorem
Če ste z odprtjem generatorja lipsum, kot je lipsum.com, napisali nekaj navideznega besedila, vam pri Emmetju ni treba več delati. Emmet prav tako podpira generator lutke z lorem ali lipsum sintakso. Določite lahko tudi, kako dolgo bo vaše besedilo postalo. Na primer, želim imeti nekaj besedila z 10 besed dolgo, potem bom tip lorem10 .
12. Samodejni dokument
Ko začnete nov projekt, namesto, da bi ročno pisali strukturo html ali kopirali lepljenje iz drugih virov, vam Emmet lahko pomaga bolje. Vse kar morate storiti je, da vtipkate vzklik ! znak, hit zavihek in čarobna zgodba. To bo za vas ustvarilo strukturo dokumenta HTML5, če želite namesto tega uporabiti HTML4, nato pa vnesite html:4t .
13. Povezava
Če imate datoteko favicon, rss ali zunanjo datoteko CSS, ki jo želite dodati v dokument, jih lahko uporabite za hitrejše pisanje. Če želite vključiti ikono favicon, vtipkajte link:favicon nato pa vam ustvari povezavo s privzetim imenom datoteke favicon.ico . In za css, link:css vam ustvari povezavo CSS s privzetim stilom imena style.css . RSS bo privzeto ime rss.xml .
Lahko jih kombinirate z znakom plus + da ustvarite hitrejše vire.
14. Sidro
Ko vnesete oznako in nato kliknete zavihek, boste privzeto dobili oznako z atributom href . Lahko pa dodate vrednost // če jo združite s povezavo, na primer a:link . Če želite namesto tega imeti poštno povezavo, uporabite a:mail .
15. Pametno preskakovanje
Zadnji HTML triki, ki vam jih dam, je funkcija pametnega preskakovanja. V bistvu, nimate pisati ime oznake, če želite imeti razred ali id v njem. To velja le za nekatere določene pogoje.
Prvič, če želite imeti div z ID ali razredom znotraj, vam ni treba pisati imena oznake, samo neposredno zapišite ID ali simbol razreda skupaj z njegovim imenom.
Drugič, ko ste znotraj oznake ul, preskočite pisanje oznake li če ima razred ali id.
In zadnji se uporablja v table . Pišete oznako tr in td lahko preskočite, če imajo razred ali id in Emmet jih bo samodejno dodal za vas.
Emmet - najboljši CSS triki
Ko se naučite nekaj HTML trikov, je zdaj čas za CSS. Nekateri skupni simboli, prikazani na zgornji sliki, ne bodo delovali s CSS. Večji so > in se povzpnejo na ^ simbole. Če jih uporabite, bodo izdelali kot plus + simbol. Torej, gremo.
1. Širina in višina
Določanje width in height z Emmetom je zelo enostavno. Samo napisati morate prvo besedo, nato pa še velikost, ki jo želite dodati. Če privzeto ne določite enot, jih bo Emmet ustvaril z enoto px . Simbol razpoložljive enote je odstotek % in em .
2. Besedilo
Obstaja nekaj enostavnih simbolov za lastnost besedila, ki bodo ustvarjeni s privzeto vrednostjo. ta bo ustvaril text-align z left vrednostjo, td bo text-decoration none vrednosti, tt bo postala text-transform z uppercase .
3. Ozadje
Če želite dodati ozadje, preprosto uporabite kratico bg . Lahko ga kombinirate z bgi da dobite background-image, bgc za background-color in bgr za background-repeat . Prav tako lahko napišete bg+ da dobite popoln seznam lastnosti v ozadju.
4. Face Font
Znak plus ne velja samo za ozadje. Za @font-face lahko preprosto napišete @f+ za popoln seznam lastnosti @font-face . Če vtipkate @f brez znaka plus, boste dobili samo osnovno @font-face .
5. Razno
Drugi veliki triki so lahko skrajša pisanje animation z anim text. Če dodate minus - znak, boste dobili lastnost animacije s polno vrednostjo. Obstaja tudi @kf besedilo, ki bo izdelalo popoln seznam @keyframe .
Zaključek
Emmet je zelo veliko orodje za prihranek časa za racionalizacijo vašega razvojnega procesa. Če samo poznate Emmeta, ni prepozno, da bi poskusili zdaj. Ti triki so samo nekatere od funkcij podjetja Emmet. V Emmetu je še toliko drugih simbolov in skladenj, zlasti za CSS. Samo nadaljujte k Emmetovim dokumentom ali goljufijam za nadaljnje branje.
