Share
De fleste artikler og opplæringsprogrammer på Emmet dekker håndtering av HTML, men i dag skal vi fokusere på Emmet med CSS. Klar til å turboladere CSS-skrivingen din? La oss gå!
Merk: Det anbefales at du har en rimelig forståelse av CSS før du følger med.
Emmet er en samling av forkortelser som utvides til html / xml / css, og tar ideen om tekstutdrag videre. Besøk nedlastingssiden og installer Emmet for valg av redaktør.
Når du arbeider med Emmet, skriver du inn riktig forkortelse og trykker på handlingstasten. I Sublime Tekst er dette TAB nøkkel. Syntaxen til filen du jobber med, bestemmer hvilke forkortelser du skal bruke.
Emmet bruker sunn forkortelse for å gjøre koding lettere. Det kan hjelpe litt eller mye, avhengig av hvor mye tid du investerer i å lære ins og outs.
Emmet (tidligere kjent som Zen koding) er en verktøysett for webutvikler som kan forbedre HTML og CSS-arbeidsflyten din sterkt.
Ikke bare sparer du tid, men det gjør kodekjøling morsom. Det er bare noe om å skrive noen få tegn og se på dem, magisk utvide til perfekt formatert kode! Hvis du får noe galt, reverserer knappen for å angre den utvidede koden tilbake til forkortelsen for å redigere og utvide på nytt.
Jeg har også funnet ut at Emmet hjelper meg å huske koden lettere. Forkortelser er ganske enkelt lettere å huske. text-transform: blir "tt" og text-align: rettferdiggjøre; blir "taj". Se hvor nyttig dette kan være? Du begynner å lære nye CSS egenskaper og må bare huske forkortelsene. Du trenger ikke engang bekymre deg for semikoloner og mellomrom, Emmet gjør det for deg!
La oss se på de grunnleggende komponentene i Emmets CSS forkortelser og hvordan de øker arbeidsflyten.
CSS gir verdier til egenskaper, som fontstørrelse, margin, polstring, osv.
Hentet fra den beste måten å lære CSS Emmet har definert alle kjente CSS-eiendommer med en forkortelse. Så nedre kant er BDB, border-top er BDT. Nedenfor er et eksempel på skriftstørrelse, som er fz.
Etter å ha skrevet forkortelsen, trykk på handlingsnøkkelen (i mitt tilfelle, TAB) og Emmet vil utgjøre forkortelsen gyldig i CSS, plassere markøren der du trenger det.
Nå som vi forstår egenskapene, er det på tide å legge til en verdi. Dette gjøres ved å skrive forkortelsen i kombinasjon med verdien som trengs. For eksempel, fZ18 vil sende til skriftstørrelse: 18px;. Du trenger ikke skrive "px" fordi Emmet vil legge til som standard. Hvis et element ikke har en enhet (som font-vekt), Emmet er smart nok til å vite ikke å legge til px.
Hva om du ikke alltid bruker piksler? Enhetene em, rem, %, ex, og px er alle tilgjengelige i Emmet. Hver enhet (selv om dette kan virke litt ekstrem) har også en forkortet form:
Accentsconagua
px → standardp → % e → em r → rem x → ex Hvis du vil bruke en enhet, legger du bare til enhetens forkortelse på slutten av verdien. Eksempelet nedenfor er å definere en skriftstørrelse med em
Noen egenskaper, som margin, tillate flere verdier. For å gjøre dette med Emmet, skille hver verdi med et dash (-). Ta en titt på eksemplet nedenfor for å definere fire verdier for kroppens margin.
Emmet ber deg om å prepend # i stedet for å legge det til din verdi. Så # går etter eiendommen din, men før din verdi. Et annet antall tegn gir forskjellige heksadesimale koder. Ta en titt på noen eksempler:
#1 → # 111111 # e0 → # e0e0e0 # fc0 → # ffcc00 Her er et eksempel på å definere kroppsfarge som # 111 (c # 1):
Selv om !viktig tag bør ikke brukes veldig ofte, tilbyr Emmet det bare incase. Legg til et utropstegn ! til forkortelsen din slik:
Nå som vi har en grunnleggende forståelse av Emmets CSS-funksjoner, er det på tide å begynne å sette dem sammen. På samme måte som HTML-funksjonene, vil du legge til et plustegn (+) for hvert element. Husk at hvis du roter noe opp, kan du alltid treffe å angre og revidere strengen.
Skriv alle dine nødvendige egenskaper og verdier, skille hver med a + og trykk deretter på handlingstasten for å se resultatet.
Her er et eksempel på å definere forskjellige marginer og paddings for kropp.
Husk at du kan bruke alle disse forkortelsene sammen eller separat. Det handler ikke om å få Emmet-kodene akkurat riktig første gang, det handler bare om å gjøre det lettere å skrive CSS. For å pakke inn disse kule animerte GIF-ene, er det en rask demo av styling som lager en div med en klasse av panel.
Emmet er et kraftig verktøy. Kreves av noen som et "høyhastighets" kodingsverktøy, slik at du kan bruke mindre tid på å skrive de samme tingene igjen og igjen uten å manuelt opprette dine egne utdrag. Emmet ble inspirert av CSS selectors og kan brukes i alle store tekstredaktører for å passe til hvilken som helst utviklers arbeidsflyt.
Husk at et nytt verktøy du legger til i arbeidsflyten din, vil ha en læringskurve, men ikke ta mer tid enn du trenger å finne ut hvordan det fungerer for deg. Regelmessig å besøke dokumentasjonen er en flott oppdatering, og Emmet gir en jukseplate med alle mulige funksjoner. Dette er bygget for å hjelpe deg å tenke mindre og skrive mer kode!
Hvordan bruker du Emmet i arbeidsflyten din? Hva er din favoritt CSS-funksjon? Gi oss beskjed i kommentarene!
