Emmet, tidligere kjent som Zen Coding, er et av de beste verktøyene du bør øke produktiviteten mens du kodes HTML eller CSS. Det fungerer akkurat som kode ferdigstillelse, men det er mer kraftig og fantastisk. Det er i stand til å automatisere HTML / CSS fra en enkel form til den komplekse.
Emmet tilbyr god støtte for tekstredigerer eller IDE (Integrated Development Environment) som Dreamweaver, Eclipse, Sublime Text, TextMate, Expresso, Coda, Brackets, Notepad ++, PHPStorm og mange flere. Den støtter også elektronisk redigeringsverktøy som JSFiddle, JSBin, CodePen, IceCoder og Codio .
Veien til Emmet-arbeider er ved å skrive tastaturtastaturnøkkelen når du er ferdig med å skrive syntaks. Følgende er de vanligste Emmet-symbolene du kan bruke. For å se dem i aksjon, vennligst fortsett å lese.
Emmet - HTML Best Tricks
Du vil bli overrasket når du skriver HTML med Emmet som jeg gjorde. Som nevnt tidligere, kan Emmet forkorte en enkel HTML til svært komplisert. Og de er skrevet bare på en enkelt linje med kode. Som standard, hvis du forkorter ukjent tagnavn, skriver Emmet automatisk taggen du skriver. Se animasjon nedenfor for å forstå det lett.
1. Nesting
For å neste noen elementer trenger du bare å legge til større tegn > etter hver koder du vil bruke. For eksempel, når jeg vil ha en header med nav, div, ul og li inni, trenger jeg bare å skrive header>nav>div>ul>li og hit-tasten.
2. Søsken
Hvis du ikke vil neste elementene dine, kan du bare bruke et pluss + skilt etterfulgt av koder du vil legge til. Eksempel, header+section+article+footer vil gi et annet sted for header, section, article og footer .
3. Klatre opp
Når du er inne i et barnelement og vil ha et annet element utenfor det barnet, kan du enkelt klatre opp ett element med ^ tegn. Hvis du skriver den to ganger, så klatrer du dobbeltelement og så videre. For eksempel, hvis du skriver header>div>h1>nav har du nav-elementet fortsatt inne i h1. For å få det ut, bare erstatt det siste > tegnet med ^ .
4. Legg til klasse
Emmet kan også inkludere ditt foretrukne klassenavn i taggen. Tegnet du vil bruke er det samme som klassevalg i CSS som er en prikk . skilt. For eksempel, hvis jeg vil ha en div med .container klasse, h1 med .title og nav med .fixed, så må jeg bare skrive div.container>header>h1.title+nav.fixed .
Hvis du vil ha mer enn én klasse på innsiden, skriv inn tilleggsklassen etter første klasse sammen med prikken . skilt. Eksempel: div.container.center vil produsere .
5. Legg til ID
I tillegg til klassen kan du også legge til en ID i taggen din med # tegn. Bruken er den samme som å legge til klasse, men du kan ikke skrive inn dobbel ID innvendig. Hvis du prøver å gjøre det, vil Emmet bare lese den siste IDen du skriver.
6. Legg til tekst
Emmet er ikke bare så enkelt som bare forkorte noen koder, du kan til og med legge til tekstlinje inni. For å legge til litt tekst, må du bare legge inn teksten med krøllkonsoll {} tegn. Du trenger ikke å legge til et større > tegn, da teksten automatisk blir lagt inn i taggen.
7. Legg til attributt
Hvis du vil legge til et annet attributt bortsett fra klasse og id, bare plasser attributt du vil legge til innvendig brakett [] tegn. For eksempel vil jeg ha et bilde som har logo.png kilde med logo alt, så jeg skriver bare img[src="logo.png"] .
8. Gruppering
Når du vil ha et element med flere nestede innsiden, vil gruppering av dem med () skilt hjelpe deg med å oppnå dette enkelt. Eksempel: Jeg vil ha en container som har header med h1 og nav inni og en annen del utenfor overskriften, jeg vil bare skrive: .container>(header>h1+nav.fixed)+(section>.content+.sidebar) .
9. Multiplikasjon
Denne funksjonen kan bli en av favorittene dine fra Emmet. Som med multiplikasjon, kan vi formere ethvert element så mye som vi vil. For å bruke det bare legg til en stjerne * logg etter element du vil multiplisere og legge til elementets nummer. For eksempel vil jeg skrive fem li-elementer i ul, så er den riktige syntaksen ul>li*5 .
10. Automatisk nummerering
Automatisk nummerering hjelper deg med å skrive et annet navn med et økende antall. Den riktige syntaksen for denne funksjonen er et dollar $ tegn. Automatisk nummerering brukes best med multiplikasjon. Eksempel, jeg vil legge til min forrige li artikkel med en klasse fra item1 til item5 . Så, jeg må bare legge til flere klassenavn med dollarskilt: ul>li.item$*5 .
11. Lorem
Hvis du pleide å skrive litt dummy tekst ved å åpne lipsum generator som lipsum.com, med Emmet trenger du ikke å gjøre det lenger. Emmet støtter også dummy lipsum med lorem eller lipsum syntaks. Du kan også angi hvor lenge teksten blir. For eksempel vil jeg ha litt tekst med 10 ord lang, så skal jeg skrive lorem10 .
12. Automatisk dokument
Når du starter et nytt prosjekt, i stedet for å skrive html-strukturen manuelt eller kopiere lime fra andre ressurser, kan Emmet gjøre det for deg bedre. Alt du trenger å gjøre er å skrive et utrop ! signere, trykke på fan og magien skje. Det vil generere en HTML5-dokumentstruktur for deg, hvis du vil bruke en HTML4 i stedet, skriv bare html:4t .
13. Link
Hvis du har en favicon, rss eller ekstern CSS-fil du vil legge til i dokumentet ditt, kan du bruke koblingstrykk for å skrive dem raskere. For å inkludere en favicon, skriv link:favicon så vil det generere deg en favicon-kobling med standard favicon.ico filnavn inni. Og for css, link:css vil generere deg en CSS-kobling med standard style.css stilnavn inni. Og RSS vil bli rss.xml som standardnavn.
Du kan kombinere dem med pluss + skilt for å generere raskere ressurser.
14. Anker
Som standard, når du skriver a tag, klikker du på fanen, og du får en komplett tag med href attributtet inne. Men du kan legge til en // verdi hvis du kombinerer den med link, for eksempel a:link . Og hvis du vil ha en e-postkobling i stedet, bruk deretter a:mail .
15. Smart Skipping
De siste HTML-triksene jeg vil gi deg, er den smarte hoppingsfunksjonen. I utgangspunktet har du ikke skrive taggenavnet når du vil ha klasse eller id inne i den. Dette gjelder bare i en viss tilstand.
Først, hvis du vil ha en div med ID eller klasse inne, trenger du ikke å skrive taggenavnet, bare skriv inn id eller klassesymbol sammen med navnet.
For det andre, når du er inne i en ul tag, hopper du over å skrive li taggen hvis den har en klasse eller et id.
Og sistnevnte er brukt innen tabelletiketten. Du kan hoppe over skriving tr og td tag hvis de har klasse eller id, og Emmet vil automatisk legge til dem for deg.
Emmet - Beste CSS triks
Etter at du har lest noen av HTML-triks, er det nå tid for CSS. Noen vanlige symboler vist i toppbildet fungerer ikke med CSS. De er større > og klatre opp ^ symboler. Hvis du bruker dem, vil de produsere akkurat som pluss + symbol. Så, la oss gå.
1. Bredde og høyde
Definere width og height med Emmet er veldig enkelt. Du må bare skrive det første ordet av dem etterfulgt av størrelsen du vil legge til. Som standard, hvis du ikke angir enhetene, vil Emmet generere dem med px enhet. Det tilgjengelige enhedssymbolet er prosent % og em .
2. Tekst
Det er noen enkle å bruke tekstegenskapssymbol og vil bli generert med standardverdien. ta vil generere text-align med left verdi, td vil være text-decoration med none verdi og tt vil bli text-transform med uppercase verdi.
3. Bakgrunn
For å legge til bakgrunn, bruk bare bg forkortelse. Du kan kombinere det med bgc for å få background-image, bgc for background-color og bgr for background-repeat . Du kan også skrive bg+ å få en fullstendig liste over bakgrunnsegenskaper.
4. Font Face
Plustegnet er ikke bare aktuelt for bakgrunnen. For @font-face, kan du bare skrive @f+ for en komplett liste over @font-face egenskapen. Hvis du skriver @f uten pluss tegn, får du bare et grunnleggende @font-face .
5. Diverse
Andre gode triks er at du kan forkorte skrive animation med anim tekst. Hvis du legger til et minustegn, får du animasjonsegenskap med full verdi. Det finnes også @kf tekst som vil gi full liste over @keyframe .
Konklusjon
Emmet er et veldig stort tidsbesparende verktøy for å effektivisere utviklingsprosessen. Hvis du bare kjenner Emmet, er det ikke for sent å prøve det nå. Disse triksene er bare noen av Emmet-funksjonene. Det er massevis av annet symbol og syntaks i Emmet, spesielt for CSS. Bare gå over til Emmet docs eller jukse ark for å fremme din lesing.
