Emmet, wcześniej znany jako Zen Coding, jest jednym z najlepszych narzędzi, które powinieneś mieć, aby zwiększyć produktywność podczas kodowania HTML lub CSS. Działa tak, jak kodowanie, ale jest mocniejszy i niesamowity. Jest w stanie zautomatyzować Twój HTML / CSS od prostego formularza do złożonego.
Emmet oferuje dobre wsparcie dla edytora tekstu lub IDE (Integrated Development Environment), takich jak Dreamweaver, Eclipse, Sublime Text, TextMate, Expresso, Coda, Brackets, Notepad ++, PHPStorm i wiele innych. Obsługuje także narzędzie do edycji online, takie jak JSFiddle, JSBin, CodePen, IceCoder i Codio .
Sposób działania Emmet polega na wpisywaniu klawisza tabulatora po zakończeniu pisania. Oto najczęściej używane symbole Emmet, których można użyć. Aby zobaczyć je w akcji, proszę czytaj dalej.
Emmet - HTML Best Tricks
Będziesz zdumiony, kiedy pisałeś HTML z Emmetem tak jak ja. Jak wspomniano wcześniej, Emmet może skrócić prosty HTML do bardzo złożonego. Są one napisane tylko w jednym wierszu kodu. Domyślnie, jeśli skracasz nazwę nieznanego tagu, Emmet automatycznie napisze napisany znacznik. Zobacz animację poniżej, aby łatwo to zrozumieć.
1. Zagnieżdżanie
Aby zagnieździć niektóre elementy, wystarczy dodać większy znak > po każdym tagu, którego chcesz użyć. Na przykład, gdy chcę mieć header z nav, div, ul i li wewnątrz, wystarczy wpisać header>nav>div>ul>li i klawisz karty hit.
2. Rodzeństwo
Jeśli nie chcesz zagnieżdżać swoich elementów, możesz po prostu użyć znaku plus + a następnie znaczników, które chcesz dodać. Przykład: header+section+article+footer daje inne miejsce dla header, section, article i footer .
3. Wspinaj się
Kiedy znajdujesz się w elemencie podrzędnym i chcesz mieć inny element poza tym dzieckiem, możesz łatwo wspiąć się na jeden element znakiem ^ . Jeśli wpiszesz go dwukrotnie, wtedy zdobędziesz podwójny element i tak dalej. Na przykład, jeśli wpiszesz header>div>h1>nav, to element nav będzie nadal w h1. Aby to zrobić, po prostu zastąp ostatni znak > ^ .
4. Dodaj klasę
Emmet może również zawierać preferowaną nazwę klasy w tagu. Znak, którego będziesz używać, jest taki sam jak selektor klasy w CSS, który jest kropką . znak. Na przykład, jeśli chcę mieć div z klasą .container, h1 z .title i nav z .fixed, to po prostu muszę napisać div.container>header>h1.title+nav.fixed .
Jeśli chcesz mieć w klasie więcej niż jedną klasę, wpisz dodatkową klasę po pierwszej klasie wraz z kropką . znak. Przykład: div.container.center .
5. Dodaj identyfikator
Poza klasą możesz również dodać identyfikator w swoim tagu za pomocą # znaku. Użycie jest takie samo jak dodanie klasy, ale nie możesz wpisać podwójnego identyfikatora wewnątrz. Jeśli spróbujesz to zrobić, Emmet odczyta tylko ostatnio wpisany ID.
6. Dodaj tekst
Emmet nie jest tak prosty, jak tylko skracać niektóre tagi, możesz nawet dodać linię tekstu wewnątrz. Aby dodać tekst, wystarczy zawinąć tekst znakiem nawias klamrowym {} . Nie musisz dodawać większego znaku > ponieważ tekst zostanie automatycznie dodany do tagu.
7. Dodaj atrybut
Jeśli chcesz dodać kolejny atrybut oprócz klasy i id, po prostu umieść atrybut, który chcesz dodać w nawiasie [] . Na przykład chcę mieć obraz, który ma źródło logo.png z logo alt, więc po prostu img[src="logo.png"] .
8. Grupowanie
Kiedy chcesz mieć element z wieloma zagnieżdżonymi wewnątrz, a następnie grupowanie ich za pomocą znaku () pomoże ci to łatwo osiągnąć. Przykład, chcę mieć kontener, który ma nagłówek z h1 i nav wewnątrz i inną sekcją poza nagłówkiem, po prostu napiszę: .container>(header>h1+nav.fixed)+(section>.content+.sidebar) .
9. Mnożenie
Ta funkcja może stać się jedną z twoich ulubionych od Emmet. Podobnie jak w przypadku mnożenia, możemy pomnożyć dowolny element tak bardzo, jak chcemy. Aby go użyć, po prostu dodaj znak gwiazdki * za elementem, który chcesz pomnożyć, i dodaj numer elementu. Na przykład, chcę napisać pięć li item wewnątrz ul, wtedy prawidłowa składnia to ul>li*5 .
10. Automatyczna numeracja
Automatyczna numeracja ułatwi Ci pisanie różnych nazw wraz z rosnącą liczbą. Odpowiednią składnią tej funkcji jest znak dolara $ . Automatyczna numeracja jest najlepiej używana przy mnożeniu. Przykład, chcę dodać mój poprzedni element li z klasą od item5 do item5 . Muszę więc dodać dodatkową nazwę klasy ze znakiem dolara: ul>li.item$*5 .
11. Lorem
Jeśli używałeś do pisania jakiegoś fałszywego tekstu, otwierając generator warg, taki jak lipsum.com, z Emmetem nie musisz już tego robić. Emmet obsługuje również generator tekstowy lipsum składnią lorem lub lipsum . Możesz także określić, jak długo będzie się pojawiał Twój tekst. Na przykład chcę mieć tekst o długości 10 słów, a następnie lorem10 .
12. Automatyczny dokument
Podczas rozpoczynania nowego projektu, zamiast ręcznego pisania struktury html lub kopiowania wklejenia z innych zasobów, Emmet może zrobić to dla Ciebie lepiej. Wszystko, co musisz zrobić, to wpisać wykrzyknik ! znak, zakładka trafień i magia się zdarza. To wygeneruje dla Ciebie strukturę dokumentu HTML5, jeśli zamiast tego chcesz użyć HTML4, po prostu wpisz html:4t .
13. Link
Jeśli masz favicon, rss lub zewnętrzny plik CSS, który chcesz dodać do swojego dokumentu, możesz użyć sztuczek linkowych, aby szybciej je napisać. Aby dołączyć favicon, wpisz link:favicon a następnie wygeneruje link favicon z domyślną nazwą pliku favicon.ico . I dla css, link:css wygeneruje ci link CSS z domyślną nazwą stylu style.css . A RSS będzie rss.xml jako nazwa domyślna.
Możesz łączyć je ze znakiem plus + aby wygenerować szybsze zasoby.
14. Kotwica
Domyślnie, po wpisaniu tagu, a następnie na karcie, otrzymasz kompletny znacznik z atrybutem href środku. Ale możesz dodać wartość // jeśli połączysz ją z linkiem na przykład a:link . A jeśli zamiast tego chcesz mieć link do poczty, użyj a:mail .
15. Inteligentne pomijanie
Ostatnie sztuczki HTML, które ci dam, to inteligentna funkcja pomijania. Zasadniczo nie musisz zapisywać nazwy znacznika, jeśli chcesz mieć wewnątrz niego klasę lub identyfikator. Dotyczy to tylko niektórych określonych warunków.
Po pierwsze, jeśli chcesz mieć element div z identyfikatorem lub klasą w środku, nie musisz wpisywać nazwy znacznika, po prostu wpisz bezpośrednio id lub symbol klasy wraz z jej nazwą.
Po drugie, gdy jesteś w tagu ul, pomijasz pisanie znacznika li jeśli ma klasę lub identyfikator.
I ostatnia jest zastosowana w tagu table . Możesz pominąć zapisywanie znaczników tr i td jeśli mają klasę lub id, a Emmet automatycznie je doda.
Emmet - najlepsze sztuczki CSS
Po zapoznaniu się z niektórymi sztuczkami HTML, teraz czas na CSS. Niektóre z popularnych symboli pokazanych na górnym obrazie nie będą działać z CSS. Są większe > i wspinają się po symbolach. Jeśli ich użyjesz, będą produkować podobnie jak symbol plus + . Więc, chodźmy.
1. Szerokość i wysokość
Określenie width i height pomocą Emmet jest bardzo łatwe. Musisz tylko napisać pierwsze słowo, a następnie rozmiar, który chcesz dodać. Domyślnie, jeśli nie określisz jednostek, Emmet wygeneruje je z jednostką px . Dostępny symbol jednostki to procent % i em .
2. Tekst
Istnieje kilka łatwych w użyciu symboli właściwości tekstowych i zostaną wygenerowane z wartością domyślną. ta wygeneruje text-align z left wartością, td będzie text-decoration none wartości, a tt text-transform się w text-transform z uppercase .
3. Tło
Aby dodać tło, po prostu użyj skrótu bg . Możesz połączyć go z bgi aby uzyskać background-image, bgc dla background-color i bgr dla background-repeat . Możesz również napisać bg+ aby uzyskać pełną listę właściwości tła.
4. Czcionka twarzy
Znak plus nie dotyczy tylko tła. W przypadku @font-face możesz po prostu napisać @f+ aby uzyskać pełną listę @font-face . Jeśli wpiszesz @f bez znaku plus, dostaniesz tylko podstawową @font-face .
5. Różne
Inne świetne sztuczki to skrócenie animation pisania z animation tekstem. Jeśli dodasz znak minus, dostaniesz właściwość animacji z pełną wartością. Istnieje również tekst @kf który wyświetli pełną listę @keyframe .
Wniosek
Emmet to bardzo duże narzędzie pozwalające oszczędzać czas, aby usprawnić proces rozwoju. Jeśli znasz już Emmeta, nie jest jeszcze za późno, aby wypróbować go teraz. Te sztuczki to tylko niektóre funkcje Emmet. W Emmecie jest mnóstwo innych symboli i składni, szczególnie dla CSS. Po prostu przejdź do dokumentów Emmet lub ściągnij arkusz, aby pogłębić czytanie.
![Seth Godin Vs Guy Kawasaki [Infografika]](https://gadget-info.com/img/best-gallery/920/seth-godin-vs-guy-kawasaki.gif)
