Share
Majoritatea articolelor și tutoriale despre Emmet acoperă manipularea HTML-ului, dar astăzi ne vom concentra pe Emmet cu CSS. Sunteți gata să încărcați scrisul CSS? Sa mergem!
Notă: Este recomandat să aveți o înțelegere rezonabilă a CSS înainte de a vă urma.
Emmet este o colecție de abrevieri care se extind în html / xml / css, luând în continuare ideea de fragmente de text. Vizitați pagina de descărcare și instalați Emmet pentru editorul ales.
Când lucrați cu Emmet, introduceți abrevierea corespunzătoare și apăsați tasta de acțiune. În textul sublim, acesta este TAB cheie. Sintaxa fișierului pe care lucrați va determina abrevierile pe care le utilizați.
Emmet foloseste abrevieri de bun simt pentru a facilita scrierea de coduri. Acesta poate ajuta un pic sau o mulțime, în funcție de timpul pe care îl investești în învățarea insu și outs.
Emmet (cunoscut anterior ca Codificare Zen) este un set de instrumente de web-developer care vă poate îmbunătăți considerabil fluxul de lucru HTML & CSS.
Nu numai că vă economisește timp, dar face scrierea codului distractiv. Există doar ceva despre scrierea câtorva caractere și despre urmărirea lor extinzându-se în mod magic într-un cod perfect format! Dacă întâmpinați ceva în neregulă, butonul de anulare inversă codul extins înapoi la abrevierea pentru a vă modifica și extinde din nou.
De asemenea, am descoperit că Emmet mă ajută să-mi amintesc mai ușor codul. Abrevierile sunt pur și simplu mai ușor de memorat. Text-transform: devine "tt" și text-align: justifica; devine "taj". Vedeți cât de utilă poate fi aceasta? Veți începe să învățați noi proprietăți CSS și trebuie doar să memorați abrevierile. Nu trebuie să te îngrijorezi nici măcar cu punct și virgulă, Emmet face chestiile pentru tine!
Să ne uităm la componentele de bază ale abrevierilor Emerson CSS și la modul în care acestea accelerează fluxul de lucru.
CSS oferă valori pentru proprietăți, cum ar fi dimensiunea fontului, marginea, umplutura, etc.
Luat de la Cel mai bun mod de a învăța CSS Emmet a definit fiecare proprietate CSS cunoscută cu o abreviere. Asa de border-bottom este BDB, border-top este BDT. Mai jos este un exemplu de marimea fontului, care este fz.
După ce tastați abrevierea, apăsați tasta de acțiune (în cazul meu, TAB) și Emmet va scoate în mod magic abrevierea în CSS valabil, plasând cursorul acolo unde aveți nevoie.
Acum, când înțelegem proprietățile, este timpul să adăugăm o valoare. Aceasta se face prin tastarea abrevierii în combinație cu valoarea necesară. De exemplu, FZ18 va ieși la font-size: 18px;. Nu este nevoie să tastați "px" deoarece Emmet o va adăuga în mod implicit. Dacă un element nu are o unitate (cum ar fi grosimea fontului), Emmet este suficient de inteligent să știe să nu adauge px.
Ce se întâmplă dacă nu utilizați întotdeauna pixeli? Unitățile em, rem, %, fără, și px sunt disponibile în Emmet. Fiecare unitate (deși poate părea puțin extremă) are și o formă abreviată:
Accentsconagua
px → implicitp → % e → em r → rem X → fără Pentru a utiliza o unitate, trebuie doar să adăugați abrevierea unității la sfârșitul valorii. Exemplul de mai jos definește o dimensiune a fontului cu em
Unele proprietăți, cum ar fi margine, permiteți valori multiple. Pentru a face acest lucru cu Emmet, separați fiecare valoare cu o linie (-). Uitați-vă la exemplul de mai jos pentru a defini patru valori ale corpului margine.
Emmet vă cere să vă pregătiți # în loc să o adăugați la valoarea dvs. Asa ca # merge după proprietatea dvs., dar înainte de valoarea dvs. Un număr diferit de caractere emite diferite coduri hexazecimale. Uitați-vă la câteva exemple:
# 1 → # 111111 # E0 → # e0e0e0 # fc0 → # exepmplu FFCC00 Iată un exemplu de definire a culorii caroseriei ca # 111 (c # 1):
Chiar dacă !important eticheta nu ar trebui să fie utilizată foarte des, Emmet o oferă doar în joc. Adăugați un semn de exclamare ! la abrevierea ta:
Acum că avem o înțelegere de bază a funcțiilor CSS ale lui Emmet, este timpul să începem să le punem împreună. În mod similar cu funcțiile HTML, veți adăuga un semn plus (+) pentru fiecare element. Amintiți-vă, dacă faceți ceva în neregulă, puteți întotdeauna să loviți și să revizuiți șirul.
Scrieți toate proprietățile și valorile cerute, separându-le pe fiecare cu o + și apoi apăsați tasta de acțiune pentru a vedea rezultatul.
Iată un exemplu de definire a marjelor și a zăbrelelor diferite pentru corp.
Rețineți că puteți utiliza toate aceste abrevieri împreună sau separat. Nu este vorba despre obținerea corectă a codurilor Emmet pentru prima dată, ci despre simplificarea scrierii CSS. Pentru a încheia aceste animate GIF-uri animate, aici este un demo rapid de stil care creează un div cu o clasă de panou.
Emmet este un instrument puternic. Revendicat de unii ca un instrument de codificare "de mare viteză", vă permite să petreceți mai puțin timp scriind aceleași lucruri mereu și fără să vă creați manual propriile fragmente. Emmet a fost inspirat de selectorii CSS și poate fi folosit în toate editoarele majore de text pentru a se potrivi cu orice flux de lucru al dezvoltatorului.
Amintiți-vă că orice instrument nou pe care îl adăugați la fluxul de lucru va avea o curbă de învățare, dar nu va lua mai mult timp decât aveți nevoie pentru a afla cum funcționează pentru dvs. Vizitarea în mod regulat a documentației este o reîmprospătare excelentă, iar Emmet oferă o foaie ieftină cu toate funcțiile posibile. Acest lucru a fost construit pentru a vă ajuta să vă gândiți mai puțin și să scrieți mai multe coduri!
Cum folosiți Emmet în fluxul de lucru? Care este funcția CSS preferată? Spuneți-ne în comentariile!
