Emmet, раніше відомий як Zen Coding, є одним з кращих інструментів, які ви повинні мати, щоб збільшити свою продуктивність при кодуванні HTML або CSS. Він працює так само, як і завершення коду, але це більш потужний і дивовижний. Він здатний автоматизувати ваш HTML / CSS від простої форми до складної.
Emmet пропонує хорошу підтримку для текстового редактора або IDE (Integrated Development Environment), таких як Dreamweaver, Eclipse, Sublime Text, TextMate, Expresso, Coda, Brackets, Notepad ++, PHPStorm та багато іншого. Він також підтримує онлайн-редагування інструментів, як JSFiddle, JSBin, CodePen, IceCoder і Codio .
Шлях роботи Emmet полягає у введенні клавіші клавіатури на вкладці після завершення написання синтаксису. Нижче наведено найбільш поширені символи Emmet, які можна використовувати. Щоб побачити їх у дії, будь ласка, продовжуйте читати.
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, h1 з .title і nav з .fixed, то я просто повинен написати div.container>header>h1.title+nav.fixed .
Якщо ви хочете мати більше одного класу, введіть додатковий клас після першого класу разом з крапкою . знак. Наприклад: div.container.center буде виробляти .
5. Додайте ідентифікатор
Крім класу, ви також можете додати ідентифікатор у тезі з # знаком. Використання є таким же, як додавання класу, але не можна вводити подвійний ідентифікатор всередині. Якщо ви спробуєте це зробити, Emmet буде читати лише останній введений ідентифікатор.
6. Додати текст
Emmet не просто так просто, як скоротити деякі теги, ви навіть можете додати рядок тексту всередині. Щоб додати текст, потрібно просто обернути текст за допомогою фігурної дужки {} . Вам не потрібно додавати більший знак, оскільки текст буде автоматично додано до тега.
7. Додати атрибут
Якщо ви хочете додати інший атрибут, крім класу і id, просто помістіть атрибут, який ви хочете додати в знак [] . Наприклад, я хочу мати зображення, яке має logo.png джерело з логотипом alt, так що я просто img[src="logo.png"] .
8. Групування
Якщо ви хочете мати елемент з декількома вкладеними всередині, то групуючи їх з () знак допоможе вам досягти цього легко. Наприклад, я хочу мати контейнер, який має заголовок з h1 і nav всередині, а інший розділ поза заголовком, я просто напишу: .container>(header>h1+nav.fixed)+(section>.content+.sidebar) .
9. Множення
Ця функція може стати однією з улюблених у Emmet. Як і при множенні, ми можемо помножити будь-який елемент на стільки, скільки хочемо. Щоб скористатися нею, просто додайте знак "зірка" після елемента, який потрібно помножити і додати номер елемента. Наприклад, я хочу записати п'ять пунктів li всередині ul, тоді правильний синтаксис ul>li*5 .
10. Автоматична нумерація
Автоматична нумерація допоможе вам легко написати іншу назву з ростом числа. Правильний синтаксис цієї функції - знак долара $ . Автоматичне нумерацію найкраще використовувати з множенням. Наприклад, я хочу додати мій попередній елемент li з класом з item1 до item5 . Отже, я просто повинен додати додаткове ім'я класу зі знаком долара: ul>li.item$*5 .
11. Лорем
Якщо ви писали якийсь фіктивний текст, відкриваючи генератор lipsum, як lipsum.com, то Emmet вам більше не потрібно це робити. Emmet також підтримує фіктивний генератор тексту з синтаксисом lorem або 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 або символ класу разом з його ім'ям.
По-друге, коли ви знаходитесь всередині тега ul, ви пропускаєте запис тега li якщо він має клас або 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 без значення і tt стане text-transform з uppercase значенням.
3. Передумови
Щоб додати фон, просто скористайтеся bg абревіатурою. Ви можете комбінувати його з bgi щоб отримати background-image, bgc для background-color і bgr для background-repeat . Ви також можете написати bg+ щоб отримати повний список властивостей фону.
4. Шрифт Face
Знак "плюс" не тільки застосовується для фону. Для @font-face, ви можете просто написати @f+ для повного списку властивості @font-face . Якщо ви введете @f без знаку плюс, то ви отримаєте лише базове @font-face .
5. Різне
Інші чудові трюки - ви можете скоротити написання animation з animation текстом. Якщо ви додаєте знак мінус, ви отримаєте властивість анімації з повним значенням. Існує також текст @kf який надасть повний список @keyframe .
Висновок
Emmet - це дуже величезний засіб економії часу, який дозволяє оптимізувати процес розробки. Якщо ви просто знаєте Еммета, зараз не пізно. Ці трюки - лише деякі з особливостей Emmet. У Emmet є тони іншого символу і синтаксису, особливо для CSS. Просто перейдіть до документів Еммета або чит-листа для подальшого читання.
