Doporučená, 2024

Redakce Choice

20 Nejlepší Emmet Tipy, které vám pomohou kód HTML / CSS Crazy Fast

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í.

Top