Emmet, predtým známy ako Zen Coding, je jedným z najlepších nástrojov, ktoré by ste mali zvýšiť vašu produktivitu pri kódovaní HTML alebo CSS. Funguje to rovnako ako kódovanie, ale je to silnejšie a úžasnejšie. Je schopný automatizovať HTML / CSS z jednoduchého formulára na komplexný.
Emmet ponúka dobrú podporu pre textový editor alebo IDE (Integrované vývojové prostredie) ako Dreamweaver, Eclipse, Sublime Text, TextMate, Expresso, Coda, Konzoly, Poznámkový blok ++, PHPStorm a mnoho ďalších. Tiež podporuje on-line editačný nástroj ako JSFiddle, JSBin, CodePen, IceCoder a Codio .
Cesta, ktorú Emmet funguje, je zadaním klávesovej skratky klaviatúry pri písaní syntaxe. Nasledujúce sú najčastejšie symboly Emmet, ktoré môžete použiť. Ak ich chcete vidieť v akcii, pokračujte v čítaní.
Emmet - HTML najlepšie triky
Budete sa diviť, keď píšete HTML s Emmetom ako ja. Ako už bolo uvedené, Emmet je schopný skrátiť jednoduchý kód HTML do veľmi zložitého. A sú napísané iba na jednom riadku kódu. Štandardne, ak skrátite neznámy názov značky, Emmet automaticky napíše značku, ktorú napíšete. Pozrite si animáciu nižšie, aby ste ju ľahko pochopili.
1. Hniezdenie
Ak chcete hniezdiť niektoré prvky, stačí pridať väčší znak > po každej značke, ktorú chcete použiť. Napríklad, keď chcem mať header s nav, div, ul a li vo vnútri, stačí zadať header>nav>div>ul>li a klávesovú skratku.
2. Súrodenec
Ak nechcete hniezdiť svoje prvky, môžete jednoducho použiť znamienko plus + a značky, ktoré chcete pridať. Príklad: header+section+article+footer bude mať iné miesto pre header, section, article a footer .
3. Vystupte hore
Keď sa nachádzate vo vnútri podradeného elementu a chcete mať ďalší prvok mimo dieťa, môžete ľahko vyliezť jeden prvok s označením ^ . Ak ho zadáte dvakrát, potom vylezete dvojitý element a tak ďalej. Napríklad, ak zadáte header>div>h1>nav, budete mať prvok nav ešte v h1. Ak to chcete vynechať, stačí nahradiť posledný > znak pomocou ^ .
4. Pridajte triedu
Emmet je tiež schopný zahrnúť vaše obľúbené meno triedy do značky. Znak, ktorý použijete, je rovnaký ako selektor triedy v CSS, ktorý je bodkou . podpísať. Napríklad, ak chcem mať div s triedou .container, h1 s .title a nav s .fixed, potom stačí napísať div.container>header>h1.title+nav.fixed .
Ak chcete mať vo vnútri viac ako jednu triedu, zadajte ďalšiu triedu po prvej triede spolu s bodkou . podpísať. Príklad: div.container.center vytvorí ,
5. Pridajte ID
Okrem triedy môžete do značky pridať aj ID s označením # . Použitie je rovnaké ako pridanie triedy, ale nesmiete uviesť dvojité ID vnútri. Ak sa to pokúsite, Emmet prečíta len posledné zadané ID.
6. Pridajte text
Emmet nie je len tak jednoduchý, ako len skracovať niektoré značky, môžete dokonca pridať riadok textu vnútri. Ak chcete pridať nejaký text, stačí zabaliť text pomocou znaku {} . Nepotrebujete pridať väčší > znak, pretože text bude automaticky pridaný do značky.
7. Pridať atribút
Ak chcete pridať iný atribút okrem triedy a id, stačí umiestniť atribút, ktorý chcete pridať do značky [] . Napríklad chcem mať obrázok, ktorý má logo.png zdroj s logom alt, tak som img[src="logo.png"] .
8. Zoskupovanie
Ak chcete mať prvok s viacerými vnorenými do vnútra, zoskupenie s označením () vám pomôže dosiahnuť to ľahko. Príklad: Chcem mať kontajner, ktorý má hlavičku s h1 a nav vo vnútri a iný oddiel mimo záhlavia, jednoducho napíšem: .container>(header>h1+nav.fixed)+(section>.content+.sidebar) .
9. Násobenie
Táto funkcia sa môže stať jednou z vašich obľúbených z Emmetu. Rovnako ako pri násobení, môžeme množiť ľubovoľný prvok tak, ako chceme. Ak to chcete použiť, jednoducho pridajte znak hviezdičky * po prvku, ktorý chcete vynásobiť, a pridajte číslo elementu. Napríklad, chcem napísať päť li položiek vnútri ul, potom správna syntax je ul>li*5 .
10. Automatické číslovanie
Automatické číslovanie vám pomôže ľahko zapisovať rôzne mená s rastúcim počtom. Správna syntax pre túto funkciu je znak dolára $ . Automatické číslovanie sa najlepšie používa pri násobení. Príklad: Chcem pridať moju predchádzajúcu položku s triedou od položky item1 do položky item5 . Takže musím len pridať ďalší názov triedy s znakom dolára: ul>li.item$*5 .
11. Lorem
Ak ste písali nejaký fiktívny text otvorením generátora lipsum ako lipsum.com, s Emmetom to už nemusíte robiť. Emmet tiež podporuje zdanlivý generátor textov s lipsum alebo lipsum syntaxou. Môžete tiež určiť, ako dlho sa váš text stane. Napríklad, chcem mať nejaký text s dĺžkou 10 slov, potom lorem10 .
12. Automatický dokument
Keď začínate nový projekt, namiesto písania štruktúry html manuálne alebo kopírovanie vloženia z iných zdrojov, Emmet to dokáže pre vás lepšie. Všetko, čo musíte urobiť, je napísať výkričník ! podpísať, stlačiť kartu a kúzlo sa stane. To vám vytvorí štruktúru dokumentov HTML5, ak chcete namiesto toho použiť kód HTML4, potom zadajte html:4t .
13. Odkaz
Ak máte súbor favicon, rss alebo externý súbor CSS, ktorý chcete pridať do dokumentu, môžete použiť trikové prepojenia na ich rýchlejší zápis. Ak chcete zahrnúť favikón, napíšte link:favicon potom vám vytvorí odkaz favicon s predvoleným názvom súboru favicon.ico vo vnútri. A pre css, link:css vám vytvorí CSS odkaz s predvoleným štýlom style.css vo vnútri. A RSS bude rss.xml ako predvolený názov.
Môžete ich skombinovať so znamienkom plus + a generovať rýchlejšie zdroje.
14. Kotva
V predvolenom nastavení, keď zadáte značku a potom sa dostanete na kartu, dostanete kompletnú značku s atribútom href vo vnútri. Môžete však pridať // hodnotu, ak ju kombinujete s odkazom napríklad a:link . A ak chcete mať namiesto toho poštový odkaz, použite a:mail .
15. Smart Skipping
Posledné triky HTML, ktoré vám dám, je funkcia inteligentného preskočenia. V podstate nemáte napísať názov značky, ak chcete mať triedy alebo id v nej. Toto platí len za určitých podmienok.
Po prvé, ak chcete mať div s ID alebo triedou vnútri, nemusíte písať názov značky, stačí priamo zapísať id alebo symbol triedy spolu s jeho menom.
Po druhé, keď sa nachádzate vo vnútri značky ul, preskočíte písanie značky li ak má triedu alebo id.
A posledný sa aplikuje v rámci značky table . Môžete preskočiť písanie tr a td tagu, ak majú triedu alebo id a Emmet ich automaticky pridá za vás.
Emmet - najlepšie triky CSS
Keď sa naučíte niektoré triky HTML, teraz je čas pre CSS. Niektorý spoločný symbol zobrazený na hornom obrázku nebude fungovať s CSS. Sú väčšie > a vyššia hore ^ symboly. Ak ich budete používať, budú sa vyrábať rovnako ako symbol + plus. Takže poďme.
1. Šírka a výška
Definovanie width a height s Emmetom je veľmi jednoduché. Stačí len napísať prvé slovo z nich, za ktorým nasleduje veľkosť, ktorú chcete pridať. Štandardne, ak neurčíte jednotky, Emmet ich vygeneruje s jednotkou px . Symbol dostupnej jednotky je percento a em .
2. Text
Existuje nejaký ľahko použiteľný symbol vlastností textu a bude generovaný s predvolenou hodnotou. ta bude generovať text-align s left hodnotou, td bude text-decoration none hodnoty a tt sa stane text-transform s uppercase hodnotou.
3. Pozadie
Ak chcete pridať pozadie, stačí použiť skratku bg . Môžete ho skombinovať s bgi a získať background-image, bgc pre background-color a bgr pre background-repeat . Môžete tiež napísať bg+ a získať úplný zoznam vlastností pozadia.
4. Font Face
Znak plus nie je určený iba pre pozadie. Pre @font-face, môžete jednoducho napísať @f+ pre kompletný zoznam vlastnosti @font-face . Ak zadáte @f bez znamienka plus, dostanete len základnú @font-face len.
5. Rôzne
Ďalšie skvelé triky môžete skrátiť písanie animation s animation textom. Ak pridáte znamienko mínus, získate vlastnosť animácie s plnou hodnotou. K dispozícii je tiež text @kf ktorý vytvorí úplný zoznam @keyframe .
záver
Emmet je veľmi obrovský časovo úsporný nástroj na zefektívnenie vášho vývojového procesu. Ak len poznáte Emmetu, nie je príliš neskoro to vyskúšať. Tieto triky sú len niektoré z funkcií Emmetu. Existuje veľa ďalších symbolov a syntaxe v Emmet, najmä pre CSS. Stačí sa obrátiť na Emmet doks alebo podvádzať list na ďalšie čítanie.
