Oliver Matthews
0 
2370
429
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 code-aanvulling, maar het is krachtiger en verbazingwekkender. Het is in staat om uw HTML / CSS van een eenvoudig formulier naar een complex formulier te automatiseren.
Emmet biedt goede ondersteuning voor teksteditor of IDE (Integrated Development Environment) zoals Dreamweaver, Eclipse, Sublime Text, TextMate, Expresso, Coda, Brackets, Notepad ++, PHPStorm en nog veel meer. Het ondersteunt ook online bewerkingstools zoals JSFiddle, JSBin, CodePen, IceCoder en Codio.
De manier waarop Emmet werkt, is door uw tab-toetsenbordtoets in te typen wanneer u klaar bent met het schrijven van de syntaxis. Hieronder volgen de meest voorkomende Emmet-symbolen die u kunt gebruiken. Lees verder om ze in actie te zien.
Emmet - HTML beste trucs
Je zult versteld staan als je HTML schrijft met Emmet zoals ik deed. Zoals eerder vermeld, kan Emmet een eenvoudige HTML afkorten tot een zeer complexe HTML. En ze zijn alleen geschreven op een enkele regel code. Als u onbekende tagnaam afkortt, schrijft Emmet standaard automatisch de tag die u schrijft. Zie onderstaande animatie om het gemakkelijk te begrijpen.
1. Nestelen
Om sommige elementen te nesten, hoeft u alleen maar een groter teken toe te voegen > na elke tag die u wilt gebruiken. Als ik bijvoorbeeld een koptekst met nav, div, ul en li binnen moet ik gewoon typen koptekst> nav> div> ul> li en de hit tab-toets.
2. Broer / zus
Als je je elementen niet wilt nesten, kun je gewoon een plus gebruiken + teken gevolgd door tags die u wilt toevoegen. Voorbeeld, de koptekst + sectie + artikel + voettekst zal een andere plaats voor geven koptekst, sectie, artikel en voettekst.
3. Klim omhoog
Wanneer u zich in een kindelement bevindt en u wilt een ander element buiten dat kind hebben, kunt u gemakkelijk een element omhoog klimmen ^ teken. Als je het twee keer typt, klim je dubbel element enzovoort. Als u bijvoorbeeld typt koptekst> div> h1> nav je hebt het nav-element nog steeds in de h1. Om het eruit te krijgen, vervangt u gewoon de laatste > ondertekenen met ^.
4. Klasse toevoegen
Emmet kan ook de klassenaam van uw voorkeur opnemen in de tag. Het teken dat u gebruikt, is hetzelfde als klassekiezer in CSS, dat is een punt . teken. Als ik bijvoorbeeld een div met .container klasse, h1 met .titel en nav met .gemaakt, dan moet ik gewoon schrijven div.container> header> h1.title + nav. vast.
Als je meer dan één klas binnen wilt hebben, typ dan je extra klas na de eerste klas samen met de punt . teken. Voorbeeld: div.container.center zal produceren .
5. Voeg ID toe
Naast les kun je ook een ID in je tag toevoegen met # teken. Het gebruik is hetzelfde als het toevoegen van klasse, maar u mag binnenin geen dubbele ID typen. Als u dit probeert, leest Emmet alleen de laatste ID die u typt.
6. Voeg tekst toe
Emmet is niet alleen zo simpel als het afkorten van enkele tags, je kunt er zelfs een regel tekst aan toevoegen. Om wat tekst toe te voegen, hoeft u alleen de tekst met een accolade in te pakken teken. U hoeft geen grotere toe te voegen > ondertekenen omdat de tekst automatisch in de tag wordt toegevoegd.
7. Attribuut toevoegen
Als u naast klasse en id nog een attribuut wilt toevoegen, plaatst u gewoon het attribuut dat u wilt toevoegen tussen haakjes [] teken. Ik wil bijvoorbeeld een afbeelding met de logo.png-bron met logo alt, dus ik typ gewoon img [src = "logo.png"].
8. Groeperen
Als u een element met meerdere geneste binnenin wilt hebben, groepeer ze dan met () Sign helpt u dit gemakkelijk te bereiken. Ik wil bijvoorbeeld een container met een 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 van je favorieten worden van Emmet. Net als bij vermenigvuldiging, kunnen we elk element zoveel vermenigvuldigen als we willen. Om het te gebruiken, voegt u gewoon een ster toe * teken na element dat u wilt vermenigvuldigen en voeg het nummer van het element toe. Ik wil bijvoorbeeld vijf li-items binnen 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 dollar $ teken. Automatische nummering wordt het best gebruikt met vermenigvuldiging. Ik wil bijvoorbeeld mijn vorige toevoegen li item met een klasse van item 1 naar item5. Dus ik moet gewoon een extra klassenaam toevoegen met een dollarteken: ul> li.item $ * 5.
11. Lorem
Als je wat dummy-tekst schreef door de lipsum-generator zoals lipsum.com te openen, hoef je het bij Emmet niet meer te doen. Emmet ondersteunt ook een dummy-tekstgenerator met Lorem of lipsum syntaxis. U kunt ook aangeven hoe lang uw tekst zal worden. Ik wil bijvoorbeeld wat tekst van 10 woorden lang hebben, dan typ ik Lorem10.
12. Automatisch document
Wanneer u een nieuw project start, in plaats van de html-structuur handmatig te schrijven of plakken van andere bronnen te kopiëren, kan Emmet het beter voor u doen. Het enige wat je hoeft te doen is een uitroep typen ! teken, druk op de tab en de magie gebeurt. Dat genereert een HTML5-documentstructuur voor u, als u in plaats daarvan een HTML4 wilt gebruiken, typt u gewoon html: 4t.
13. Koppeling
Als je een favicon, rss of extern CSS-bestand hebt dat je aan je document wilt toevoegen, kun je linktricks gebruiken om ze sneller te schrijven. Typ om een favicon op te nemen link: favicon dan genereert het standaard een favicon-link favicon.ico bestandsnaam binnen. En voor css, link: css genereert u standaard een CSS-link style.css stijlnaam binnen. En RSS zal zijn rss.xml als de standaardnaam.
Je kunt ze combineren met plus + teken om snellere bronnen te genereren.
14. Anker
Standaard wanneer u typt een tag en vervolgens op tab, krijg je een compleet een tag met href attribuut binnen. Maar je kunt een toevoegen http: // waarde als je het bijvoorbeeld combineert met link een link. En als u in plaats daarvan een e-maillink wilt hebben, gebruik dan een: mail.
15. Slim overslaan
De laatste HTML-trucs die ik je zal geven, is de slimme skipping-functie. Kortom, u hoeft de tagnaam niet 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 met ID of klasse erin hoeft u de tagnaam niet te schrijven, u hoeft alleen maar direct het id- of klassensymbool samen met de naam te schrijven.
Ten tweede, wanneer je in een ul tag, sla je het schrijven van de li tag als het een klasse of id heeft.
En de laatste wordt binnenin aangebracht tafel label. Je kunt het schrijven overslaan tr en td tag als ze klasse of id hebben en Emmet zal ze automatisch voor je toevoegen.
Emmet - Beste CSS-trucs
Nadat je enkele HTML-trucs hebt geleerd, is het nu tijd voor de CSS. Sommige veelgebruikte symbolen in de bovenste afbeelding werken niet met CSS. Ze zijn groter > en klim omhoog ^ symbolen. Als je ze gebruikt, zullen ze net als plus produceren + symbool. Laten we beginnen.
1. Breedte en hoogte
Definiëren breedte en hoogte met Emmet is heel eenvoudig. Je hoeft alleen maar het eerste woord te schrijven, gevolgd door de grootte die je wilt toevoegen. Als u de eenheden niet specificeert, genereert Emmet deze standaard met px eenheid. Het beschikbare eenheidssymbool is procent % en em.
2. Tekst
Er zijn enkele eenvoudig te gebruiken teksteigenschappen-symbolen en worden gegenereerd met de standaardwaarde. ta zal genereren tekst uitlijnen met links waarde, td zal zijn tekst-decoratie met geen waarde en tt zal worden tekst-transformatie met hoofdletters waarde.
3. Achtergrond
Gebruik gewoon om achtergrond toe te voegen bg afkorting. Je kunt het combineren met bgi te krijgen achtergrond afbeelding, bgc voor Achtergrond kleur en bgr voor achtergrond herhaling. Je kunt ook schrijven bg+ om een volledige lijst met achtergrondeigenschappen te krijgen.
4. Lettertype
Het plusteken is niet alleen van toepassing op de achtergrond. Voor @ font-face, je kunt gewoon schrijven @f+ voor een volledige lijst van @ font-face eigendom. Als je typt @f zonder plusteken, dan krijg je een basis @ font-face enkel en alleen.
5. Diversen
Andere geweldige trucs zijn dat je het schrijven kunt afkorten animatie met anim tekst. Als je een min toevoegt - teken, krijgt u een animatie-eigenschap met volledige waarde. Er is ook @kf tekst die een volledige lijst van zal opleveren @keyframe.
ZIE OOK: Top 15 gratis PHP-frameworks voor 2015
Gevolgtrekking
Emmet is een enorm enorme tijdbesparende tool om uw ontwikkelingsproces te stroomlijnen. Als je Emmet gewoon kent, is het niet te laat om het nu te proberen. Die trucs zijn slechts enkele van de Emmet-functies. Er zijn heel veel andere symbolen en syntaxis in Emmet, vooral voor CSS. Ga gewoon naar Emmet-documenten of spiekbriefje om verder te lezen.