Emmet
Mi az az Emmet?
Az Emmet egy automatikus kódkiegészítő, ami megkönnyíti a munkát HTML és CSS dokumentumokkal, úgy hogy drasztikusan csökkenti a gépelés mennyiségét (és a gépelési hibákat).
Számos fejlesztői eszközbe alapértelmezetten be van integrálva, köztük a VS Code szövegszerkesztőbe, és a Codepen.io online szövegszerkesztőbe is.
Az Emmet rövidítéseket (abbreviation) használ, amiket begépelve komplex HTML struktúrákat kapunk vissza.
Például ha VS Code-ban megnyitunk egy HTML dokumentumot, és új sorban leütjük a p
betűt, és entert (vagy tab-ot) nyomunk, egy HTML bekezdést kapunk:
Az Emmet honlapja az alábbi linken érhető el: https://emmet.io/
Emmet példák
html:5 vagy !
Az alapvető HTML elemeket tehetjük be vele egy üres dokumentumba. Eredménye:
h1
Egy üres főcím. Eredménye:
h1>lorem3
Főcím 3 töltelékszóval. Eredménye:
A > jel a jel előtt lévő elembe beleteszi a jel után következő elemet. Például ennél a rövidítésnél: div>p a szövegszerkesztő létrehoz egy div elemet, és elhelyez benne egy bekezdést.
A lorem rövidítés egy bekezdésnyi töltelékszöveget hoz létre. Meghatározhatjuk hogy hány szóból álljon a töltelékszöveg, ehhez írjuk a lorem kulcsszó után közvetlenül a létrehozni kívánt szavak számát: lorem15 ez a rövidítés egy 15 szóból álló töltelékszöveget hoz létre.
p
Egy üres bekezdést hoz létre. Eredménye:
p>lorem
Egy bekezdést hoz létre egy bekezdésnyi töltelékszöveggel. Eredménye:
p{Tarka kutya tarka felfelé kucsorodó farka!}
Egy bekezdést hoz létre konkrét szöveges tartalommal. Eredménye:
(p>lorem)*3
3 bekezdés töltelékszöveggel. Eredménye:
A * jellel sokszorozni tudunk, például a p*5 rövidítés 5 üres bekezdést hoz létre. Ha több egymásba ágyazott elemet akarunk sokszorozni, például 5 üres bekezdés helyett 5 bekezdést töltelékszöveggel, a sokszorozni kívánt elemeket tegyük zárójelbe: (p>lorem)*5
h1+h2+p
Egy üres főcím, utána üres alcím, végül egy üres bekezdés Eredménye:
A + jellel egymás után tudunk elhelyezni elemeket, például a div+div két div-et hoz létre. Ezzel a módszerrel egy oldal fő strukturális elemeit egy menetben létre tudjuk hozni: header+main+aside+footer
(h1>lorem1)+((h2>lorem3)+p>lorem)*2
Egy főcím, utána két alcím egy-egy bekezdéssel. Mindegyik elemben megBootstrap szolgáltatásaifelelő mennyiségű töltelékszöveg. Eredménye:
ul>li
Egy lista egy üres lista elemmel Eredménye:
ul>li*3
Egy lista három üres lista elemmel Eredménye:
ul>(li>lorem3)*6
Egy lista 6 lista elemmel, mindegyik lista elemben három töltelék szóval. Eredménye:
nav>ul>(li>a>lorem3)*5
Navigáció listátával, 5 darab lista elemmel, a list elemekben linkekkel. Eredménye:
Last updated