Emmet, dříve známý jako Zen Coding, je jedním z nejlepších nástrojů, které byste měli mít ke zvýšení produktivity při kódování HTML nebo CSS. Funguje to stejně jako dokončení kódu, ale je to silnější a úžasnější. Je schopen automatizovat HTML / CSS z jednoduché formy do složité.
Emmet nabízí dobrou podporu pro textový editor nebo IDE (integrované vývojové prostředí), jako je Dreamweaver, Eclipse, Sublime Text, TextMate, Expresso, Coda, držáky, Notepad ++, PHPStorm a mnoho dalších. Podporuje také online editační nástroj jako JSFiddle, JSBin, CodePen, IceCoder a Codio .
Způsob práce Emmetu spočívá v tom, že při psaní syntaxe psaní na klávesnici zadáváte klíč klávesnice. Níže jsou uvedeny nejběžnější symboly Emmet, které můžete použít. Chcete-li je vidět v akci, pokračujte ve čtení.
Emmet - HTML Nejlepší triky
Budete ohromeni, když budete psát HTML s Emmetem jako já. Jak již bylo řečeno, Emmet je schopen zkrátit jednoduchý HTML na velmi složitý. A jsou napsány pouze na jednom řádku kódu. Standardně, pokud zkrátíte název neznámého tagu, Emmet automaticky zapíše značku, kterou píšete. Viz animace níže, abyste ji snadno pochopili.
1. Hnízdění
Chcete-li vnořit některé prvky, stačí přidat větší znaménko > za každou značku, kterou chcete použít. Například, když chci mít header s nav, div, ul a li uvnitř, musím jen napsat header>nav>div>ul>li a klávesou hit tab.
2. Sourozenec
Pokud nechcete své elementy vnořit, můžete jednoduše použít znaménko plus + následované značkami, které chcete přidat. Příklad header+section+article+footer dá jiné místo pro header, section, article a footer .
3. Výstup nahoru
Když jste uvnitř podřízeného elementu a chcete mít jiný prvek mimo toto dítě, můžete snadno vyšplhat na jeden prvek znakem ^ . Pokud to napíšete dvakrát, vylezete dvojitým prvkem a tak dále. Pokud například zadáte header>div>h1>nav, budete mít prvek nav stále uvnitř h1. Chcete-li to zjistit, stačí nahradit poslední znak znakem ^ .
4. Přidejte třídu
Emmet je také schopen zahrnout vaše preferované jméno třídy do tagu. Znaménko, které použijete, je stejné jako označení třídy v CSS, což je tečka . podepsat. Například, pokud chci mít div s .container třídou, h1 s .title a nav s .fixed, pak musím napsat div.container>header>h1.title+nav.fixed .
Pokud chcete mít více než jednu třídu uvnitř, zadejte svou další třídu po první třídě spolu s tečkou . podepsat. Příklad: div.container.center bude produkovat .
5. Přidejte ID
Kromě třídy můžete také přidat ID uvnitř značky se znakem # . Použití je stejné jako přidávání třídy, ale nesmíte zadat dvojité ID uvnitř. Pokud se o to pokusíte, Emmet bude číst pouze poslední ID, které zadáte.
6. Přidat text
Emmet není jen tak jednoduchý, jak jen zkrátit některé značky, můžete dokonce přidat řádek textu uvnitř. Chcete-li přidat nějaký text, stačí zalomit text znakem složené závorky {} . Nemusíte přidat větší znak > protože text bude automaticky přidán do značky.
7. Přidejte atribut
Pokud chcete přidat jiný atribut kromě třídy a id, stačí umístit atribut, který chcete přidat uvnitř znaku závorky [] . Například chci mít obrázek, který má logo.png zdroj s logem alt, takže jsem právě img[src="logo.png"] .
8. Seskupování
Pokud chcete mít prvek s množstvím vnořeným uvnitř, pak seskupení se znakem () vám to pomůže snadno dosáhnout. Příklad: Chci mít kontejner, který má hlavičku s h1 a nav uvnitř a další sekci mimo záhlaví, budu prostě psát: .container>(header>h1+nav.fixed)+(section>.content+.sidebar) .
9. Násobení
Tato funkce se může stát jednou z vašich oblíbených od Emmetu. Stejně jako u násobení, můžeme násobit jakýkoliv prvek tak, jak chceme. Chcete-li jej použít, přidejte za prvek znak * který chcete násobit, a přidejte číslo prvku. Například, chci psát pět li položky uvnitř ul, pak pravá syntaxe je ul>li*5 .
10. Automatické číslování
Automatické číslování vám pomůže snadno napsat jiné jméno s rostoucím počtem. Správná syntaxe pro tuto funkci je znak dolaru $ . Automatické číslování je nejvhodnější při násobení. Příklad: Chci přidat svou předchozí položku li s třídou z položky 1 do item5 . Takže musím přidat další název třídy se znakem dolaru: ul>li.item$*5 .
11. Lorem
Pokud jste použili k napsání nějakého falešného textu otevřením lipsum generátoru, jako je lipsum.com, s Emmetem už to nemusíte dělat. Emmet také podporuje generátor fiktivních textů se lorem nebo lipsum . Můžete také určit, jak dlouho se text bude zobrazovat. Například, chci mít nějaký text s 10 dlouhými slovy, pak budu psát lorem10 .
12. Automatický dokument
Když začínáte nový projekt, namísto psaní struktury html ručně nebo kopírování vkládání z jiných zdrojů, může Emmet to udělat pro vás lépe. Jediné, co musíte udělat, je napsat výkřik ! znamení, hit karta a magie se stalo. Tím vytvoříte strukturu dokumentu HTML5, pokud chcete místo toho použít HTML4, pak stačí zadat html:4t .
13. Odkaz
Máte-li soubor favicon, rss nebo externí soubor CSS, který chcete přidat do dokumentu, můžete je použít rychleji. Chcete-li zahrnout favicon, zadejte link:favicon pak vygeneruje odkaz favicon s výchozím názvem souboru favicon.ico uvnitř. A pro css, link:css vytvoříte CSS odkaz s výchozím stylem stylu style.css uvnitř. A RSS bude rss.xml jako výchozí název.
Můžete je kombinovat se znaménkem plus + a generovat tak rychlejší zdroje.
14. Kotva
Ve výchozím nastavení, když napíšete značku a pak kliknete na kartu, dostanete kompletní značku s atributem href uvnitř. Můžete však přidat hodnotu // pokud ji zkombinujete s odkazem například a:link . A pokud chcete mít místo toho poštovní odkaz, použijte a:mail .
15. Inteligentní přeskakování
Poslední triky HTML, které vám dám, jsou funkce inteligentního přeskakování. V podstatě nemáte název tagu, pokud chcete mít v něm třídu nebo id. To platí pouze pro určité podmínky.
Za prvé, pokud chcete mít div s ID nebo třídou uvnitř, nemusíte psát název značky, stačí napsat id nebo symbol třídy spolu s jeho jménem.
Za druhé, když jste uvnitř tagu ul, přeskočíte psaní li tagu, pokud má třídu nebo id.
A poslední je aplikován v table . Pokud přeskočíte psaní tagu tr a td, pokud mají třídu nebo id a Emmet vám je automaticky přidá.
Emmet - nejlepší CSS triky
Poté, co se naučíte některé HTML triky, je čas na CSS. Některé běžné symboly zobrazené na horním obrázku nebudou fungovat s CSS. Jsou větší > a stoupají nahoru symboly. Pokud je použijete, budou produkovat stejně jako symbol plus + . Tak pojďme.
1. Šířka a výška
Definování width a height pomocí Emmetu je velmi snadné. Stačí napsat první slovo, za kterým následuje velikost, kterou chcete přidat. Ve výchozím nastavení, pokud jednotky nezadáte, vygeneruje je Emmet s jednotkou px . Symbol dostupné jednotky je procenta a em .
2. Text
Tam jsou některé snadno použitelný text vlastnost symbol a bude generován s výchozí hodnotou. ta bude generovat text-align s left hodnotou, td bude text-decoration s hodnotou none a tt se stane text-transform s uppercase .
3. Pozadí
Chcete-li přidat pozadí, použijte zkratku bg . Můžete ji zkombinovat s bgi abyste získali background-image, bgc pro background-color a bgr pro background-repeat . Můžete také napsat bg+ abyste získali úplný seznam vlastností na pozadí.
4. Tvář písma
Znaménko plus není použitelné pouze pro pozadí. Pro @font-face můžete jednoduše napsat @f+ pro úplný seznam vlastností @font-face . Pokud zadáte znak @f bez znaménka plus, dostanete pouze základní znak @font-face .
5. Různé
Další skvělé triky můžete zkrátit psaní animation textem. Pokud přidáte znaménko mínus, dostanete vlastnost animace s plnou hodnotou. K dispozici je také @kf text, který vytvoří úplný seznam @ @keyframe .
Závěr
Emmet je velmi obrovský nástroj pro úsporu času, který umožňuje zefektivnit proces vývoje. Pokud znáte Emmeta, není pozdě už to zkusit. Tyto triky jsou jen některé z Emmetových funkcí. V Emmetu existuje tona dalšího symbolu a syntaxe, zejména pro CSS. Jen přes hlavu na Emmet dokumenty nebo podvádět k dalšímu čtení.
