Jak zainstalować rozszerzenie Emmet w edytorze Brackets opisałam w moim poprzednim wpisie. W tym artykule przejdziemy do pokazania, w jaki sposób możemy za jej pomocą pisać szybko kod.
1. Pozwala na szybkie wpisywanie elementów HTML. Wystarczy, że wpiszesz:
h2
i wciśniesz Tab klawisz, a w rezultacie otrzymasz otwierający i zamykający znacznik elementu h2 , z kursorem ustawionym w środku( między tymi znacznikami), aby od razu szybko wpisywać do niego zawartość:
2. Wystarczy wpisać nazwę elementu znak mniejszości( < ) i kolejną nazwę elementu, aby otrzymać element HTML z zawartością innego elementu HTML.
Pamiętaj jednak, aby między poszczególnymi znakami nie dodawać spacji.
Dla przykładu po wpisaniu:
p > ul > li
i wciśnięciu klawisza Tab , otrzymasz w wyniku kod:
Pamiętaj, aby stanąć kursorem po całym wpisanym kodzie przed wciśnięciem tabulatora, a nie w środku, czy na początku kodu. W przeciwnym razie nie zostanie wygenerowany cały kod.
3. A co jeśli lista ma zawierać 3 elementy li ? Wtedy wystarczy dopisać tuż za elementem znak gwiazdki( * ) i liczbę wystąpień tego elementu w kodzie, a więc wpisz po prostu
p>ul>li *3
Oczywiście wpisany kod zatwierdzamy tabulatorem. A oto wynik:
4. No dobrze, a co jeśli chcemy mieć element p z klasą o nazwie znaki ? Po prostu po p wpisujemy znak kropki i nazwę klasy:
p .znaki >ul>li*3
A oto wynik:
5. W podobny sposób działa dodawanie do elementu identyfikatora. Dodajmy dla listy id o nazwie main :
p.znaki>ul #main >li*3
Wynik:
6. Kolejna ważna funkcja to możliwość przedstawienia elementów jeden pod drugim, a nie jeden w drugim. Umożliwia dodać kolejny element na tym samym poziomie zagnieżdżenia. Wtedy zaraz po opisaniu ul , wpisujemy znak plus( + ) i podajemy definicję dla kolejnego elementu, którym ma się pod nim znaleźć. Załóżmy, że pod listą chcemy jeszcze umieścić 2 znaczniki a z linkami url. Wpisujemy zatem:
p.znaki>ul#main>li*3 +a *2
zatwierdzając tabulatorem. Spójrz na wygenerowany kod i zauważ, że w przypadku elementu a jest dodawany automatycznie atrybut href .:
W podobny sposób zadziała dodanie elementu img przechowującego linki do obrazków. Wpisanie:
p.znaki>ul#main>li*3 +img *2
kodu spowoduje wygenerowanie dla elementu img także atrybutów src o raz alt :
7. I jeszcze jeden operator: ^ , który wskazuje, że element podany za nim powinien znaleźć się o 1 poziom zagnieżdżenia wyżej od elementu, po którym ten znak podajemy. A więc jeśli po definicji elementu li podamy znak ^ i nazwę elementu span , element ten pojawi się na poziomie elementu ul , bo o 1 poziom wyżej niż element li :
p.znaki>ul#main>li*3 ^span
A po wpisaniu 2 znaków ^ , element span zostanie o 2 poziomy wyżej od elementu podanego przed span :
p.znaki>ul#main>li*3 ^^span
Porównaj kod wygenerowany z 2 znakami ^^:
Jeden poziom wyżej od li to poziom ul , ale kolejny poziom wyżej to poziom elementu p . Dlatego element span wystąpił po elemencie p .
8. Emmet pozwala także na operowanie na grupach co bardzo ułatwia wygenerowanie kodu ze zdefiniowanymi przez nas fragmentami. Grupę definiują nawiasy zwykłe. To co znajduje się w tych nawiasach to grupa. Grupę możemy traktować jak elementy, a więc powtarzać jej wystąpienie dowolna liczbę razy, umieszczać na różnych poziomach zagnieżdżenia itp. Dla przykładu zapiszmy:
div> ( p.main>a ) *2+img*3
W tym przypadku dzięki potraktowaniu elementu p z zawartym w nim elementem a jako grupy mogliśmy użyć powtórzenia tego fragmentu 2 razy. Pod grupą dopiero dodaliśmy na tym samym poziomie zagnieżdżenia dwa elementy img .
9. Jeśli chcemy dla elementu dodać atrybut z zawartością, możemy tego dokonać w nawiasach kwadratowych. Po nazwie elementu w nawiasach kwadratowych [ ] podajemy nazwę atrybutu, znak równości i w apostrofach lub cudzysłowie jego wartość. Wpiszmy dla głównego elementu div z poprzedniego punktu atrybut title z łańcuchem znakowym „Obrazy”.
div [ title=”Obrazy” ] >(p.main>a)*2+img*3
10. Do powtórzenia elementów używamy operatora * . Jeśli jednak chcemy dodatkowo dodać numer kolejnego powtarzanego elementu przed znakiem * wpisujemy znak $ . Wygenerujmy w elemencie div 3 elementy p wraz z identyfikatorem o nazwie nr i podanym kolejnym numerem:
div>p#nr $ *3
11. Jednak do numeracji możemy dodać także kierunek tzn. czy ma to być wyliczanie rosnąco czy malejąco. Rosnący jest domyślnym kierunkiem, ale możemy go zmienić dodając modyfikator @- po znaku $ . Zmieńmy więc kierunek wyliczania na malejący dla naszego ostatniego przykładu:
div>p#nr $ @- *3
Jak widać tym razem numeracja rozpoczyna się od większej do mniejszej liczby.
12. Dodanie liczby za modyfikatorem zmiany kierunku wyliczania pozwoli na wypisywanie liczb od tej liczby(przy rosnącym kierunku), a przy malejącym jak w naszym przykładzie poniżej kończy się tą liczbą:
div>p#nr$@- 2 *3
13. Emmet pozwala także na wstawianie tekstu do elementu. Aby tego dokonać musimy go wpisać w nawiasy klamrowe: {} . Wstawmy więc do podanych elementów p tekst ten sam co id tych elementów p :
div>p#nr$@-2 { $@-2 } *3
Zauważmy, w którym miejscu nawiasy są dodane. Najpierw do elementu jest dodawany operator wyliczania( $ ), dalej modyfikator malejącego kierunku( @- ), potem numer rozpoczęcia lub końca wyliczania(tu jest to 2 ) i dopiero nawiasy klamrowe z tekstem stanowiącym zawartość elementu, a na koniec operator * z numerem powtórzeń tego elementu.
14. Gdy tekst elementu ma wyliczać rosnąco w przeciwieństwie do wartości id, wtedy można pominąć modyfikator zmiany kierunku(@-), a pozostawić liczbę początku wyliczenia, ale należy ją poprzedzić modyfikatorem: @ :
div>p#nr$@-2{$ @2 }*3
15. A wpisując sam tylko tekst wystarczy użyć nawiasów klamrowych { } i tekstu wewnątrz. Wstawmy dla każdego p tym razem słowo paragraf :
div>p#nr$@-2 {paragraf} *3
I na koniec bardziej rozbudowany przykład, w którym zmieniamy pustą zawartość atrybutu href na ścieżkę do pliku z numerem pliku i rozszerzeniem jpg:
div>a#nr$@-2[href=”documents/$@-2.jpg”]{paragraf $@-2}*3
I efekt:
16. Jeśli potrzebujesz tekstu tymczasowego stosowanego przez developerów, którym jest Lorem ipsum … , wystarczy wpisać w edytorze słowo lorem lub słowo lipsum i zatwierdzić tabulatorem, aby pojawił się jeden akapit tego tekstu, np. wpisz:
lorem
A oto wygenerowany tekst:
Gdy podasz po nim dodatkowo liczbę, zostanie wyświetlonych tyle wyrazów tego tekstu ile podałeś po tym słowie, np
lorem 100
wyświetli taki tekst:
Gdy chcesz wygenerować 4 akapity tego tekstu, a każdy akapit ma mieć 20 wyrazów, wystarczy wpisać:
lorem20*4
Zwróć uwagę, że wtedy akapity zostaną umieszczone w elementach div .
17. Wtyczka posiada także cechę uzupełniania o elementy związane ściśle z podanym przez nas elementem. I tak podanie tylko klasy i podelementów bez nadrzędnego elementu spowoduje, że jako nadrzędny element będzie wygenerowany div . Oto przykład:
.content#main>p
który generuje taki kod:
W przypadku podania głównego elementu, który jest listą np. ul i nie podania podelementu dopisze li ,np.:
ul>.elem*3
wygeneruje:
Podobnie zachowa się w przypadku elementu p z id nie wskazanego podelementu:
p>#$*2
Wynik:
I jeszcze tabela z dwoma kolejnymi podelementami nie podanymi w skrótowym kodzie:
table>[color=’yellow’]>[borders=’none’]
18. Emmet pozwala także na szybsze pisanie kodu w CSS, ale póki co, tylko dotyczy to właściwości a nie selektorów. Wystarczy podać pierwszą literę właściwości np. dla margin jest to m oraz liczbę, która ma stanowić wartość tej właściwości i znak jednostki. Dla em jest to e , dla % jest to p , a dla ex jest to x , a sama liczba to px . Załóżmy, że chcemy nadać elementowi margines równy 20 em, wtedy wpisujemy skrót:
m20em
i zatwierdzamy tabulatorem. A oto wygenerowany kod:
Dla podanej wartości rgb koloru z powtarzającą się liczbą szesnastkową w wartości właściwości color , wystarczy podać po literze c (właściwość color ) znak # i liczbę szesnastkową lub jej część do powtórzenia np. d5:
c#d5
A dla nazw właściwości dwuczłonowych np. font-weight stosuje się pierwsze litery tych wyrazów( font-weight jest to fw), np:
fw200
20. A aby wygenerować szybko strukturę dokumentu HTML wystarczy wpisać:
doc
Efekt:
A gdy ma być wygenerowany jeszcze DOCTYPE i lang atrybut dla elementu html, wpiszmy:
!
co da nam wynik:
Jak widać Emmet może znacznie przyśpieszyć generowanie struktury strony, dlatego nie bez poowdu jest jedną z najczęściej wykorzystywanych wtyczek dla edytorów HTML. Czasem wpisanie tylko jednego wiersza kodu i wciśnięcie tabulatora potrafi wygenerować kilka stron kodu HTML. Więcej na temat skrótów znajdziecie w ściągawce( Cheat-Sheet) pod linkiem: https://docs.emmet.io/cheat-sheet/