Emmet, voorheen bekend als Zen Coding, is een van de beste tools die u zou moeten hebben om uw productiviteit te verhogen tijdens het coderen van HTML of CSS. Het werkt net als het aanvullen van code, maar het is krachtiger en verbazingwekkender. Het is in staat om uw HTML / CSS te automatiseren van een eenvoudig formulier naar een complex formulier.
Emmet biedt goede ondersteuning voor teksteditor of IDE (Integrated Development Environment) zoals Dreamweaver, Eclipse, Sublime Text, TextMate, Expresso, Coda, Brackets, Notepad ++, PHPStorm en veel meer. Het ondersteunt ook online bewerkingstools zoals JSFiddle, JSBin, CodePen, IceCoder en Codio .
De manier waarop Emmet werkt, is door de tab-klaviertoets in te typen wanneer u klaar bent met het schrijven van de syntaxis. De volgende zijn meest voorkomende Emmet-symbolen die u kunt gebruiken. Als u ze in actie wilt zien, lees dan verder.
Emmet - HTML beste trucs
Je zult versteld staan van het schrijven van HTML met Emmet zoals ik deed. Zoals eerder vermeld, is Emmet in staat om een eenvoudige HTML af te korten tot een zeer complexe. En ze zijn alleen geschreven op een enkele regel code. Als u de onbekende labelnaam afkapt, schrijft Emmet automatisch de tag die u schrijft. Zie onderstaande animatie om het gemakkelijk te begrijpen.
1. Nesten
Om sommige elementen te nesten, hoeft u alleen maar groter teken toe te voegen > na elke tag die u wilt gebruiken. Als ik bijvoorbeeld een header wil hebben met nav, div, ul en li inside, moet ik alleen de header>nav>div>ul>li en de header>nav>div>ul>li typen.
2. Broer / zus
Als u uw elementen niet wilt nesten, kunt u eenvoudig een plusteken +, gevolgd door tags die u wilt toevoegen. Voorbeeld: de header+section+article+footer geeft een andere plaats voor header, section, article en footer .
3. Klim omhoog
Wanneer je in een kindelement zit en een ander element buiten dat kind wilt hebben, kun je eenvoudig een element omhoog klimmen met ^ teken. Als je het twee keer typt, dan klim je dubbel element enzovoort. Als u bijvoorbeeld de header>div>h1>nav typt, blijft het navigatie-element binnen de h1 staan. Om het eruit te halen, vervang je gewoon het laatste > teken met ^ .
4. Klasse toevoegen
Emmet kan ook de door jou gewenste klassenaam opnemen in de tag. Het teken dat u zult gebruiken is hetzelfde als de klasse selector in CSS, dat is een punt . teken. Als ik bijvoorbeeld een div klasse wil hebben met .container, h1 met .title en nav met .fixed, dan .fixed ik alleen div.container>header>h1.title+nav.fixed .
Als u meer dan één klas in de klas wilt hebben, typt u uw aanvullende les na de eerste les samen met de punt . teken. Voorbeeld: div.container.center zal produceren .
5. Voeg ID toe
Naast de les kun je ook een ID toevoegen aan je tag met #teken. Het gebruik is hetzelfde als het toevoegen van klasse, maar je mag geen dubbele ID intypen. Als u dit probeert, leest Emmet alleen de laatste ID die u typt.
6. Tekst toevoegen
Emmet is niet alleen zo simpel als alleen maar een aantal tags af te korten, je kunt er zelfs een regel tekst aan toevoegen. Als u tekst wilt toevoegen, moet u de tekst omwikkelen met het teken voor de gekrulde haak {} . U hoeft geen groter > -teken toe te voegen, omdat de tekst automatisch aan de binnenkant van de tag wordt toegevoegd.
7. Voeg kenmerk toe
Als u nog een ander kenmerk wilt toevoegen naast klasse en id, plaatst u het kenmerk dat u wilt toevoegen binnen het beugel [] -teken. Ik wil bijvoorbeeld een afbeelding hebben met logo.png bron met logo alt, dus typ ik img[src="logo.png"] .
8. Groeperen
Wanneer u een element met meerdere geneste binnen wilt hebben, kunt u dit gemakkelijk groeperen met behulp van het () -teken. Voorbeeld, ik wil een container met header met h1 en nav binnen en een andere sectie buiten de header, ik zal gewoon schrijven: .container>(header>h1+nav.fixed)+(section>.content+.sidebar) .
9. Vermenigvuldiging
Deze functie kan een favoriet worden van Emmet. Net als bij vermenigvuldiging kunnen we elk element zo veel vermenigvuldigen als we willen. Om het te gebruiken, voegt u eenvoudig een sterretje * na het element dat u wilt vermenigvuldigen en voegt u het nummer van het element toe. Ik wil bijvoorbeeld vijf li items in ul schrijven, dan is de juiste syntaxis ul>li*5 .
10. Automatische nummering
Met automatische nummering kunt u gemakkelijk een andere naam schrijven met een toenemend aantal. De juiste syntaxis voor deze functie is een dollarteken. Auto nummering is het best te gebruiken met vermenigvuldiging. Voorbeeld, ik wil mijn vorige li item toevoegen aan een klasse van item1 tot item5 . Dus ik moet gewoon extra klassenaam toevoegen met dollarteken: ul>li.item$*5 .
11. Lorem
Als je vroeger een dummy-tekst had geschreven door lipsum-generator zoals lipsum.com te openen, hoef je het met Emmet niet meer te doen. Emmet ondersteunt ook dummy- lipsum met lipsum of lipsum syntaxis. U kunt ook opgeven hoe lang uw tekst wordt. Ik wil bijvoorbeeld wat tekst met 10 woorden lang hebben, dan zal ik lorem10 .
12. Auto Document
Wanneer u een nieuw project start, in plaats van de html-structuur handmatig te schrijven of het plakken van andere bronnen te kopiëren, kan Emmet het voor u beter doen. Het enige wat je hoeft te doen is een uitroep typen ! teken, klik op het tabblad en de magie gebeurt. Dat genereert een HTML5 documentstructuur voor u, als u in plaats daarvan een HTML4 wilt gebruiken, typ dan gewoon html:4t .
13. Link
Als u een favicon, rss of extern CSS-bestand hebt dat u aan uw document wilt toevoegen, kunt u linktricks gebruiken om ze sneller te schrijven. Als u een favicon wilt opnemen, typt u link:favicon vervolgens genereert u een favicon-link met standaard de favicon.ico bestandsnaam binnenin. En voor css, link:css genereert u een CSS-link met de standaard style.css stijlnaam binnenin. En RSS wordt rss.xml als standaardnaam.
U kunt ze combineren met plus + -teken om sneller middelen te genereren.
14. Anker
Wanneer u standaard a tag typt en vervolgens op het tabblad tikt, krijgt u een complete tag met het kenmerk href aan de binnenkant. Maar u kunt een // -waarde toevoegen als u deze combineert met een link, bijvoorbeeld a:link . En als u in plaats daarvan een e-mailkoppeling wilt hebben, gebruikt u a:mail .
15. Smart Skipping
De laatste HTML-trucs die ik je geef, zijn de slimme overslaan-functie. Kortom, u hoeft niet de tagnaam te schrijven als u klasse of id erin wilt hebben. Dit is alleen van toepassing op een bepaalde voorwaarde.
Ten eerste, als je een div wilt hebben met ID of klasse erin, hoef je niet de tag naam te schrijven, gewoon direct id of klassensymbool schrijven samen met zijn naam.
Ten tweede, als u zich binnen een ul tag bevindt, sla dan de li tag over als deze een klasse of ID heeft.
En de laatste wordt toegepast binnen de tabeltag. Je kunt het schrijven van tr en td tags overslaan als ze een klasse of ID hebben en Emmet zal ze automatisch voor je toevoegen.
Emmet - Beste CSS-trucs
Nadat je wat HTML-trucs hebt geleerd, is het nu tijd voor de CSS. Een aantal veelgebruikte symbolen in de bovenste afbeelding werken niet met CSS. Ze zijn groter > en stijgen op ^ symbolen. Als u ze gebruikt, produceren ze net als plus + symbool. Dus laten we gaan.
1. Breedte en hoogte
Het bepalen van de width en height met Emmet is heel eenvoudig. U hoeft alleen het eerste woord te schrijven, gevolgd door de maat die u wilt toevoegen. Als u de eenheden niet opgeeft, genereert Emmet deze standaard met px eenheid. Het beschikbare eenheidssymbool is procent % en em .
2. Tekst
Er is een eenvoudig te gebruiken teksteigenschapsymbool en dit wordt gegenereerd met de standaardwaarde. ta genereert text-align met left value, td is text-decoration met none waarde en tt wordt text-transform met uppercase waarde.
3. Achtergrond
Gebruik bg afkorting om achtergrond toe te voegen. Je kunt het combineren met bgi om background-image te krijgen, bgc voor background-color en bgr voor background-repeat . U kunt ook bg+ schrijven om een volledige lijst met achtergrondeigenschappen te krijgen.
4. Lettertype gezicht
Het plusteken is niet alleen van toepassing op de achtergrond. Voor @font-face kunt u eenvoudig @f+ voor een volledige lijst met @font-face eigenschappen. Als u @f zonder plusteken, krijgt u alleen een basislettertype @font-face .
5. Diversen
Andere geweldige trucs zijn dat je het schrijven van animation met anim . Als u een minteken toevoegt, krijgt u een animatie-eigenschap met de volledige waarde. Er is ook @kf tekst die de volledige lijst met @keyframe zal produceren.
Conclusie
Emmet is een zeer grote tijdbesparende tool om uw ontwikkelingsproces te stroomlijnen. Als je Emmet kent, is het niet te laat om het nu te proberen. Die trucs zijn slechts enkele van de Emmet-functies. Er zijn veel andere symbolen en syntaxis in Emmet, vooral voor CSS. Ga gewoon naar Emmet-documenten of spiekbriefje om verder te lezen.
