Emmet, познат преди като Zen Coding, е един от най-добрия инструмент, който трябва да увеличите производителността си, докато кодирате HTML или CSS. Работи точно като завършване на кода, но е по-мощно и невероятно. Той е в състояние да автоматизира HTML / CSS от проста форма до сложна.
Emmet предлага добра поддръжка за текстов редактор или IDE (интегрирана среда за разработка) като Dreamweaver, Eclipse, Sublime Text, TextMate, Expresso, Coda, Brackets, Notepad ++, PHPStorm и много други. Той също така поддържа онлайн инструмент за редактиране като JSFiddle, JSBin, CodePen, IceCoder и Codio .
Начинът, по който работи Emmet, е да напишете клавиша на клавиатурата си, когато сте написали синтаксиса. По-долу са най-често срещаните символи на Емет, които можете да използвате. За да ги видите в действие, моля, продължете да четете.
Еммет - HTML най-добри трикове
Ще бъдете изумени, когато пишете HTML с Emmet, както направих аз. Както беше посочено по-горе, Emmet е в състояние да съкрати прост HTML до много сложен. И те са написани само на един ред код. По подразбиране, ако съкращавате неизвестно име на маркер, Emmet автоматично ще напише маркера, който пишете. Вижте анимацията по-долу, за да я разберете лесно.
1. Гнездене
За да включите някои елементи, трябва само да добавите по-голям знак > след всеки етикет, който искате да използвате. Например, когато искам да имам header с nav, div, ul и li вътре, просто трябва да напишете header>nav>div>ul>li и клавиша за хит.
2. Сестра
Ако не искате да поставите елементи, можете просто да използвате знак плюс + последван от тагове, които искате да добавите. Например, header+section+article+footer ще даде различно място за header, section, article и footer .
3. Изкачи се нагоре
Когато сте вътре в детския елемент и искате да имате друг елемент извън него, лесно можете да се изкачите с един елемент с знак ^ . Ако го напишете два пъти, тогава ще се качите на двойния елемент и така нататък. Например, ако напишете header>div>h1>nav ще имате навигационния елемент все още вътре в h1. За да я извадите, просто заменете последния > знак с ^ .
4. Добавете клас
Emmet също така може да включи предпочитаното от вас име на клас в рамките на маркера. Знакът, който ще използвате, е същият като селектора на класове в CSS, който е точка . знак. Например, ако искам да имам div с .container class, h1 с .title и nav с .fixed, тогава просто трябва да напиша div.container>header>h1.title+nav.fixed .
Ако искате да имате повече от един клас вътре, след това въведете допълнителния клас след първия клас заедно с точката . знак. Пример: div.container.center ще произведе ,
5. Добавете ID
Освен клас, можете също да добавите идентификатор в своя маркер с # знак. Употребата е същата като добавянето на клас, но не можете да въведете двоен идентификатор вътре. Ако се опитате да го направите, Emmet ще прочете само последния идентификатор, който въвеждате.
6. Добавете текст
Emmet не е просто толкова просто, колкото да съкращаваме някои маркери, дори можете да добавите текст отвътре. За да добавите текст, трябва само да обгърнете текста с фигурен знак {} . Не е необходимо да добавяте по-голям > знак, тъй като текстът автоматично ще бъде добавен вътре в маркера.
7. Добавете атрибут
Ако искате да добавите друг атрибут освен клас и идентификатор, просто поставете атрибута, който искате да добавите в скоба [] знак. Например, искам да имам изображение, което има logo.png източник с лого alt, така че просто пиша img[src="logo.png"] .
8. Групиране
Когато искате да имате елемент с множество вложени вътре, след това ги групирате с () знак ще ви помогне да постигнете това лесно. Например, искам да имам контейнер, който има заглавка с h1 и nav вътре и друга част извън заглавката, просто ще напиша: .container>(header>h1+nav.fixed)+(section>.content+.sidebar) .
9. Умножение
Тази функция може да се превърне в любима от Emmet. Както при умножението, можем да умножим всеки елемент колкото искаме. За да го използвате, просто добавете знак звезда * след елемент, който искате да умножите и да добавите номера на елемента. Например, искам да напиша пет елемента вътре в ul, тогава правилния синтаксис е ul>li*5 .
10. Автоматично номериране
Автоматичното номериране ще ви помогне лесно да напишете различно име с нарастващ брой. Правилният синтаксис за тази функция е знакът за долар $ . Автоматичното номериране се използва най-добре с умножение. Например, искам да добавя предишния си елемент li с клас от позиция item1 към item5 . Така че, просто трябва да добавя допълнително име на клас със знак за долар: ul>li.item$*5 .
11. Lorem
Ако сте използвали да напишете някакъв фиктивен текст чрез отваряне на lipsum генератор като lipsum.com, с Emmet не е нужно да го правите повече. Emmet също поддържа генератор на текст с lipsum или lipsum синтаксис. Можете също така да посочите колко дълго ще стане текстът ви. Например, искам да имам текст с дължина от 10 думи, след което ще lorem10 .
12. Автоматичен документ
Когато стартирате нов проект, вместо да пишете ръчно HTML структурата или да копирате вмъкване от други ресурси, Emmet може да го направи по-добре за вас. Всичко, което трябва да направите, е да напишете възклицателен знак ! знак, хит таб и магията се случи. Това ще генерира HTML5 структура на документа за вас, ако искате вместо това да използвате HTML4, а след това просто въведете html:4t .
13. Връзка
Ако имате favicon, rss или външен CSS файл, който искате да добавите към документа, можете да използвате трикове за връзки, за да ги запишете по-бързо. За да включите favicon, напишете link:favicon след което ще ви генерира връзка favicon с името на файла favicon.ico по подразбиране вътре. А за css, link:css ще ви генерира CSS връзка със стил по подразбиране style.css вътре. А RSS ще бъде rss.xml като име по подразбиране.
Можете да ги комбинирате със знак плюс + да генерирате по-бързи ресурси.
14. Котва
По подразбиране, когато напишете етикет, след това натиснете бутона, ще получите пълен маркер с атрибут href вътре. Но можете да добавите // стойност, ако го комбинирате с връзка например a:link . И ако искате вместо това да имате линк, използвайте a:mail .
15. Интелигентно прескачане
Последните трикове за HTML, които ще ви дам, са функцията за интелигентно прескачане. По принцип, не трябва да напишете името на маркера, когато искате да имате клас или идентификатор вътре в него. Това се отнася само за някои определени условия.
Първо, ако искате да имате div с ID или клас вътре, не е необходимо да пишете името на маркера, просто директно запишете id или class symbol заедно с името му.
Второ, когато сте вътре в ul tag, прескачате да пишете li tag, ако има клас или id.
И последното се прилага в table таг. Можете да пропуснете писането на tr и td тагове, ако те имат клас или id и Emmet автоматично ще ги добави за вас.
Emmet - най-добрите трикове за CSS
След като научите някои от триковете на HTML, сега е време за CSS. Някои от общите символи, показани в горния образ, няма да работят с CSS. Те са по-големи и изкачват ^ символи. Ако ги използвате, те ще произведат точно като плюс + символ. Така че нека да тръгваме.
1. Ширина и височина
Определянето на width и height с Emmet е много лесно. Трябва само да напишете първата дума от тях, последвана от размера, който искате да добавите. По подразбиране, ако не посочите единиците, Emmet ще ги генерира с px единица. Наличният символ на единица е процент % и em .
2. Текст
Има някои лесни за използване символи за свойство на текст и ще бъдат генерирани със стойност по подразбиране. ta ще генерира text-align с left стойност, td ще бъде text-decoration none стойност и tt ще стане text-transform с uppercase стойност.
3. Предистория
За да добавите фон, просто използвайте bg абревиатура. Можете да го комбинирате с bgi да получите background-image, bgc за background-color и bgr за background-repeat . Можете също да напишете bg+ да получите пълен списък на фона на свойството.
4. Font Face
Знакът плюс не е приложим само за фон. За @font-face можете просто да напишете @f+ за пълен списък на собствеността на @font-face . Ако въведете @f без знак плюс, ще получите само основна @font-face .
5. Разни
Други страхотни трикове са, че можете да съкратите писането на animation с animation текст. Ако добавите минус, ще получите анимация с пълна стойност. Има и @kf текст, който ще произведе пълен списък с @keyframe .
заключение
Emmet е много огромен инструмент, който спестява време, за да рационализира процеса на развитие. Ако просто познавате Емет, не е твърде късно да го опитате сега. Тези трикове са само някои от функциите на Emmet. Има много други символи и синтаксис в Emmet, особено за CSS. Просто се отправете към документите на Емет или измамете листа за по-нататъшно четене.
