Damian Washington
27 
5834
896
Emmet, dříve známý jako Zen Coding, je jedním z nejlepších nástrojů, které byste měli zvýšit svou produktivitu při kódování HTML nebo CSS. Funguje to stejně jako dokončení kódu, ale je výkonnější a úžasnější. Je schopen automatizovat váš HTML / CSS od jednoduché formy ke složité.
Emmet nabízí dobrou podporu pro textový editor nebo IDE (Integrated Development Environment), jako je Dreamweaver, Eclipse, úžasný text, TextMate, Expresso, Coda, závorky, Poznámkový blok ++, PHPStorm a mnoho dalších. Podporuje také online editační nástroj jako JSFiddle, JSBin, CodePen, IceCoder a Codio.
Způsob, jakým Emmet pracuje, je po zadání syntaxe zadáním klávesy klávesnice na kartě. Toto jsou nejběžnější symboly Emmet, které můžete použít. Chcete-li je vidět v akci, pokračujte ve čtení.
Emmet - nejlepší HTML triky
Při psaní HTML s Emmetem budete ohromeni, jako jsem to udělal já. Jak bylo uvedeno výše, Emmet je schopen zkrátit jednoduchý HTML na velmi složitý. A jsou psány pouze na jednom řádku kódu. Ve výchozím nastavení, pokud zkrátíte název neznámé značky, Emmet automaticky zapíše značku, kterou píšete. Viz animace níže, abyste to snadno pochopili.
1. Vnoření
Chcete-li vnořit některé prvky, stačí přidat větší znak > za každou značku, kterou chcete použít. Například, když chci mít záhlaví s nav, div, ul a li uvnitř musím jen napsat záhlaví> nav> div> ul> li a klávesu tab.
2. Sibling
Pokud nechcete své prvky vnořit, můžete jednoduše použít znaménko plus + značka následovaná značkami, které chcete přidat. Příklad, záhlaví + sekce + článek + zápatí dá jiné místo záhlaví, sekce, článek a zápatí.
3. Vylezte
Když jste uvnitř podřízeného prvku a chcete mít mimo něj podřízený další prvek, můžete snadno vylézt jeden prvek ^ podepsat. Pokud to zadáte dvakrát, pak vylezete na dvojitý prvek a tak dále. Například, pokud píšete záhlaví> div> h1> nav budete mít nav prvek stále uvnitř h1. Chcete-li si to, stačí nahradit poslední > podepsat s ^.
4. Přidejte třídu
Emmet je také schopen zahrnout do značky váš preferovaný název třídy. Znaménko, které použijete, je stejné jako selektor třídy v CSS, což je tečka . podepsat. Například, pokud chci mít div s .kontejner třída, h1 s .titul a nav s .pevný, pak musím jen napsat div.container> header> h1.title + nav.fixed.
Pokud chcete mít více než jednu třídu uvnitř, zadejte další třídu za první třídu spolu s tečkou . podepsat. Příklad: div.container.center bude produkovat .
5. Přidejte ID
Kromě třídy můžete do své značky přidat také ID # podepsat. Použití je stejné jako přidání třídy, ale uvnitř nelze zadat dvojité ID. Pokud to zkusíte, Emmet načte pouze poslední ID, které zadáte.
6. Přidejte text
Emmet není tak jednoduchý, jako jen zkrátí některé značky, můžete dokonce přidat řádek textu uvnitř. Chcete-li přidat nějaký text, stačí jej zabalit do složené závorky podepsat. Nemusíte přidávat větší > podepsat, protože text bude automaticky přidán do značky.
7. Přidat atribut
Pokud chcete přidat jiný atribut kromě třídy a id, stačí umístit atribut, který chcete přidat do závorky [] podepsat. Například chci mít obrázek, který má zdroj logo.png s logem alt, tak jen píšu img [src = "logo.png"].
8. Seskupení
Pokud chcete mít vnořený prvek s více, pak je seskupte () značka vám pomůže dosáhnout tohoto snadno. Příklad: Chci mít kontejner, který má záhlaví s h1 a nav uvnitř a další sekci mimo záhlaví, jednoduše píšu: .kontejner> (záhlaví> h1 + nav.fixed) + (sekce> .content + .sidebar).
9. Násobení
Tato funkce se může stát jedním z vašich oblíbených od Emmet. Stejně jako v případě násobení můžeme libovolný prvek znásobit, jak chceme. Chcete-li použít jednoduše přidat hvězdu * podepsat prvek, který chcete znásobit, a přidat číslo prvku. Například chci napsat pět li položek uvnitř ul, pak je správná syntaxe 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 dolar $ podepsat. Automatické číslování se nejlépe používá při násobení. Příklad, chci přidat můj předchozí li položka se třídou od item1 na položka 5. Musím tedy přidat další název třídy se znakem dolaru: ul> li.item $ * 5.
11. Lorem
Pokud jste psali nějaký falešný text otevřením generátoru lipsum, jako je lipsum.com, s Emmet už to nemusíte dělat. Emmet také podporuje fiktivní generátor textu pomocí lorem nebo lipsum syntax. Můžete také určit, jak dlouho bude váš text trvat. Například chci mít nějaký text o délce 10 slov, pak napíšu lorem10.
12. Automatický dokument
Když spouštíte nový projekt, namísto ručního psaní struktury html nebo kopírování vkládání z jiných zdrojů to dokáže Emmet udělat lépe. Vše, co musíte udělat, je napsat vykřičník ! znamení, hit tab a magie se stane. To vygeneruje strukturu dokumentu HTML5, pokud chcete místo toho použít HTML4, stačí zadat html: 4t.
13. Odkaz
Pokud máte soubor favicon, rss nebo externí soubor CSS, který chcete přidat do svého dokumentu, můžete použít rychlejší psaní triků s odkazy. Chcete-li přidat favicon, zadejte odkaz: favicon pak vygeneruje favicon odkaz s výchozím nastavením favicon.ico název souboru uvnitř. A pro css, odkaz: css vygeneruje odkaz CSS ve výchozím nastavení style.css název stylu uvnitř. A RSS bude rss.xml jako výchozí název.
Můžete je kombinovat s plusem + podepsat a vygenerovat rychlejší zdroje.
14. Ukotvení
Ve výchozím nastavení při psaní A tag a poté kartu, dostanete kompletní A označit pomocí href atribut uvnitř. Ale můžete přidat http: // hodnotu, pokud jej například zkombinujete s odkazem odkaz. A pokud chcete místo toho mít poštovní odkaz, pak použijte a: mail.
15. Inteligentní přeskakování
Poslední HTML triky, které vám dám, je funkce inteligentního přeskakování. V podstatě nemáte název značky, pokud v něm chcete mít třídu nebo ID. To platí pouze za určitých podmínek.
Nejprve, pokud chcete mít div s ID nebo třídou uvnitř nemusíte psát název značky, stačí přímo napsat id nebo symbol třídy spolu s jeho názvem.
Za druhé, když jste uvnitř a ul tag, vynecháte psaní li pokud má třídu nebo ID.
A poslední je použito uvnitř stůl štítek. Můžete přeskočit psaní tr a td pokud mají třídu nebo ID a Emmet je automaticky přidá za vás.
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 s CSS fungovat. Jsou větší > a vylézt ^ symboly. Pokud je použijete, budou produkovat stejně jako plus + symbol. Tak pojďme.
1. Šířka a výška
Definování šířka a výška s Emmetem je velmi snadné. Stačí napsat první slovo z nich následované velikostí, kterou chcete přidat. Ve výchozím nastavení, pokud nezadáte jednotky, Emmet je vygeneruje pomocí px jednotka. Dostupný symbol jednotky je v procentech % a em.
2. Text
Existuje několik snadno použitelných symbolů vlastnosti textu a budou generovány s výchozí hodnotou. ta bude generovat zarovnání textu s vlevo, odjet hodnota, td bude textové dekorace s žádný hodnota a tt bude textová transformace s velká písmena hodnota.
3. Pozadí
Chcete-li přidat pozadí, jednoduše použijte bg zkratka. Můžete to kombinovat s bgi dostat obrázek na pozadí, BGC pro barva pozadí a bgr pro pozadí opakovat. Můžete také psát bg+ získat úplný seznam vlastností pozadí.
4. Tvář písma
Znaménko plus není použitelné pouze pro pozadí. Pro @ font-face, můžete jednoduše napsat @F+ pro kompletní seznam @ font-face vlastnictví. Pokud píšete @F bez znaménka plus, dostanete základní @ font-face pouze.
5. Různé
Další skvělé triky můžete zkrátit na psaní animace s anim text. Pokud přidáte mínus - podepsat, dostanete animaci vlastnost s plnou hodnotou. Tam je také @ kf text, který vytvoří úplný seznam @keyframe.
SEE ALSO: Top 15 bezplatných rámců PHP pro rok 2015
Závěr
Emmet je velmi obrovský nástroj šetřící čas, který zefektivňuje proces vývoje. Pokud jen znáte Emmet, není příliš pozdě na to vyzkoušet. Tyto triky jsou jen některé z funkcí Emmet. V Emmetu jsou tuny dalších symbolů a syntaxí, zejména pro CSS. Jednoduše přejděte k Emmetovým dokumentům nebo podváděcím listům pro další čtení.