Emmet, tidigare känt som Zen Coding, är ett av de bästa verktygen du borde behöva öka din produktivitet när du kodar HTML eller CSS. Det fungerar precis som kodavslutning, men det är mer kraftfullt och fantastiskt. Det kan automatisera din HTML / CSS från en enkel form till den komplexa.
Emmet erbjuder bra stöd för textredigerare eller IDE (Integrated Development Environment) som Dreamweaver, Eclipse, Sublime Text, TextMate, Expresso, Coda, Brackets, Notepad ++, PHPStorm och många fler. Det stöder också verktyg för onlineredigeringsverktyg som JSFiddle, JSBin, CodePen, IceCoder och Codio .
Sättet för Emmet-arbeten är att skriva in din tangentbordstangent när du har skrivit syntax. Följande är vanligaste Emmet-symboler som du kan använda. För att se dem i aktion, fortsätt läsa.
Emmet - HTML Bästa Tricks
Du kommer bli förvånad när du skriver HTML med Emmet som jag gjorde. Som tidigare sagt kan Emmet förkorta en enkel HTML till mycket komplicerad. Och de är bara skrivna på en enda kodrad. Som standard, om du förkortar okänt taggnamn, skriver Emmet automatiskt taggen du skriver. Se animering nedan för att lätt förstå det.
1. Nesting
För att nästa några element behöver du bara lägga till större tecken > efter varje taggar du vill använda. Till exempel, när jag vill ha en header med nav, div, ul och li inuti behöver jag bara skriva header>nav>div>ul>li och träfffliken.
2. Syskon
Om du inte vill näsa dina element kan du helt enkelt använda ett plus + tecken följt av taggar du vill lägga till. Exempel: header+section+article+footer kommer att ge en annan plats för header, section, article och footer .
3. Klättra upp
När du är inne i ett barnelement och vill ha ett annat element utanför det barnet kan du enkelt klättra upp ett element med ^ tecken. Om du skriver det två gånger så klättar du på dubbelt element och så vidare. Om du till exempel skriver header>div>h1>nav du navelementet fortfarande inom h1. För att få ut det, ersätt det sista > tecknet med ^ .
4. Lägg till klass
Emmet kan också inkludera ditt föredragna klassnamn inom taggen. Tecknet du använder är detsamma som klassväljaren i CSS som är en punkt . skylt. Till exempel, om jag vill ha en div med .container class, h1 med .title och nav med .fixed, då måste jag bara skriva div.container>header>h1.title+nav.fixed .
Om du vill ha mer än en klass inuti, skriv sedan din ytterligare klass efter första klassen tillsammans med pricken . skylt. Exempel: div.container.center kommer att producera .
5. Lägg till ID
Förutom klass kan du också lägga till ett ID i din tagg med # tecken. Användningen är densamma som att lägga till klass men du får inte skriva in dubbel ID inuti. Om du försöker göra det, kommer Emmet bara att läsa det senaste ID du skriver.
6. Lägg till text
Emmet är inte bara så enkelt som bara förkorta några taggar, du kan till och med lägga till en rad text inuti. För att lägga till lite text måste du bara lägga in texten med curly bracket {} sign. Du behöver inte lägga till ett större > tecken eftersom texten automatiskt läggs till i taggen.
7. Lägg till attribut
Om du vill lägga till ett annat attribut bortsett från klass och id, skriv bara attributet du vill lägga till inloggningsfältet [] . Till exempel vill jag ha en bild som har logo.png källa med logotyp alt, så jag skriver bara img[src="logo.png"] .
8. Gruppering
När du vill ha ett element med flera nestade inuti, då gruppera dem med () -tecknet hjälper dig att uppnå detta enkelt. Exempel: Jag vill ha en behållare med rubrik med h1 och nav inuti och en annan sektion utanför rubriken. Jag skriver helt enkelt: .container>(header>h1+nav.fixed)+(section>.content+.sidebar) .
9. Multiplikation
Den här funktionen kan bli en av din favorit från Emmet. Precis som vid multiplikation kan vi multiplicera något element så mycket som vi vill. För att använda det lägger du bara till en stjärna * tecken efter element som du vill multiplicera och lägga till elementets nummer. Till exempel vill jag skriva fem li-objekt inom ul, då är rätt syntax ul>li*5 .
10. Automatisk numrering
Automatisk numrering hjälper dig att enkelt skriva ett annat namn med ökande antal. Den rätta syntaxen för den här funktionen är en dollar $ -tecken. Automatisk numrering används bäst med multiplikation. Exempel, jag vill lägga till mitt föregående li objekt med en klass från item1 till item5 . Så, jag måste bara lägga till ytterligare klassnamn med dollartecken: ul>li.item$*5 .
11. Lorem
Om du brukade skriva lite dummy text genom att öppna lipsum generator som lipsum.com, behöver du inte göra det med Emmet. Emmet stöder också dummy textgenerator med lorem eller lipsum . Du kan också ange hur länge din text kommer att bli. Till exempel vill jag ha lite text med 10 ord långa, då skriver lorem10 .
12. Automatisk dokument
När du startar ett nytt projekt, istället för att skriva html-strukturen manuellt eller kopiera klistra in från andra resurser, kan Emmet göra det för dig bättre. Allt du behöver göra är att skriva ett utrop ! teckna, träffa fliken och magiken hända. Det kommer att generera en HTML5-dokumentstruktur för dig, om du vill använda en HTML4 istället, skriv bara html:4t .
13. Länk
Om du har en favicon, rss eller extern CSS-fil som du vill lägga till i ditt dokument kan du använda länkstickor för att skriva dem snabbare. För att inkludera en favicon, typ link:favicon då kommer det att generera en favicon länk med standard favicon.ico filnamn inuti. Och för css, link:css kommer skapa dig en CSS-länk med standard style.css stilnamn inuti. Och RSS kommer att vara rss.xml som standardnamn.
Du kan kombinera dem med plus + tecken för att skapa snabbare resurser.
14. Ankare
Som standard, när du skriver a tagg, klickar du på fliken, så får du en fullständig tagg med href attributet inuti. Men du kan lägga till ett // värde om du kombinerar det med länken till exempel a:link . Och om du vill ha en länk istället, använd sedan a:mail .
15. Smart Hoppa
De senaste HTML-trickarna jag kommer att ge dig är smarta hoppningsfunktionen. I grund och botten har du inte skriv taggnamnet när du vill ha klass eller id i den. Detta gäller endast under vissa förutsättningar.
Först, om du vill ha en div med ID eller klass inuti, behöver du inte skriva taggnamnet, skriv bara id eller klasssymbol tillsammans med dess namn.
För det andra, när du är inne i en ul tagg hoppar du över att skriva li taggen om den har en klass eller en id.
Och det sistnämnda tillämpas inom table tagg. Du kan hoppa över skriv tr och td tagg om de har klass eller id och Emmet lägger automatiskt till dem för dig.
Emmet - Bästa CSS Tricks
När du har läst några HTML-tricks, är det dags för CSS. En del av den gemensamma symbolen som visas i toppbilden fungerar inte med CSS. De är större > och klättra upp ^ symboler. Om du använder dem, kommer de att producera precis som plus + symbol. Så, låt oss komma igång.
1. Bredd & Höjd
Definiera width och height med Emmet är väldigt enkelt. Du måste bara skriva det första ordet av dem följt av den storlek du vill lägga till. Som standard, om du inte anger enheterna, genererar Emmet dem med px enhet. Den tillgängliga enhetssymbolen är procent % och em .
2. Text
Det finns några enkla att använda textegenskapssymboler och kommer att genereras med standardvärde. ta kommer att generera text-align med left, td kommer td med none värde och tt kommer att bli text-transform med uppercase .
3. Bakgrund
För att lägga till bakgrund, använd bara bg förkortning. Du kan kombinera den med bgi att få background-image, bgc för background-color och bgr för background-repeat . Du kan också skriva bg+ att få en fullständig lista över bakgrundsegenskaper.
4. Font Face
Plustecknet är inte bara tillämpligt för bakgrund. För @font-face kan du helt enkelt skriva @f+ för en komplett lista över @font-face egenskapen. Om du skriver @f utan plustecken får du bara ett grundläggande @font-face .
5. Diverse
Andra bra knep är att du kan förkorta skrivande animation med anim . Om du lägger till ett minustecken får du animeringsegenskap med fullt värde. Det finns också @kf text som kommer att producera en fullständig lista över @keyframe .
Slutsats
Emmet är ett mycket stort tidsbesparande verktyg för att effektivisera din utvecklingsprocess. Om du bara känner till Emmet är det inte för sent att prova det nu. Dessa knep är bara några av Emmet-funktionerna. Det finns massor av annan symbol och syntax i Emmet, speciellt för CSS. Hoppa bara över till Emmet docs eller fuska ark för att ytterligare läsa.
