Emmet – Podstawy

W tym wpisie przedstawię czym jest Emmet i jakie daje możliwości. Nie da się pokazać wszystkich dobrodziejstw omawianego narzędzia w jednym wpisie, ponieważ wyszedłby bardzo obszerny materiał, dlatego skupię się na najważniejszych aspektach. W najbliższych tygodniach pojawią się wpisy dopełniające temat.

Czym jest Emmet?

Zacznijmy od tego czym w ogóle jest omawiane w tym wpisie narzędzie. Emmet to rozszerzenie, które pozwala przyśpieszyć pisanie kodu zarówno HTML, jak również CSS i XSL. Polega na wprowadzeniu odpowiedniego skrótu lub kombinacji skrótów i wciśnięciu przycisku tabulacji. Dodatkowo wyposażony jest w akcje przyśpieszające modyfikowanie kodu. Poniżej znajduje się prosty przykład, który pokazuje sposób działania omawianego rozszerzenia.

div

Po naciśnięciu tabulatora otrzymamy znacznik div.

<div> </div>

W niektórych skrótach Emmet tworzy tak zwane tabstop, które pozwalają za pomocą tabulatora przechodzić pomiędzy tymi miejscami w celu wypełnienia określonych pól, np.

a

Spowoduje wygenerowanie poniższego kodu

<a href=""></a>

Mamy tu dwa tabstopy. Pierwszy znajduję się w atrybucie href=„(tabstop)”, drugi zaś pomiędzy początkiem i końcem znacznika a. Dzięki temu możemy szybko wprowadzić ścieżkę do której ma odwoływać się dany link oraz tekst wyświetlany na stronie.

Rozszerzenie można zainstalować na wielu IDE. Pełną listę wspieranych środowisk programistycznych można znaleźć na głównej stronie Emmetu. Rozwiązanie to w niektórych programach jest wbudowane, np. Visual Studio Code.

Warto również powiedzieć wprost, że Emmet to nie podpowiedzi do HTMLa czy CSSa, lecz skrócony zapis tagów i właściwości. Korzystanie z tego rozwiązania pozwala zdecydowanie przyśpieszyć pisanie kodu o czym przekonasz się poznając podstawowe skróty wykorzystywane do pisania HTMLa.

Podstawowe skróty

W tej części skupię się na przedstawieniu podstawowych mechanizmów, wykorzystywanych podczas pracy z Emmetem w plikach HTML.

Elementy

Na powyższych przykładach pokazałem w jaki sposób tworzone są tagi HTML. Warto zaznaczyć, że omawiane rozszerzenie nie posiada zdefiniowanych nazw tagów, zatem można utworzyć element HTML z dowolnego słowa, np.

bugajsky

Zostanie wygenerowany znacznik

<bugajsky></bugajsky>

Operatory zagnieżdżenia

Operatory te służą do określania pozycji elementów w utworzonym skrócie.

Element dziecko

Aby utworzyć element znajdujący się wewnątrz innego elementu, należy użyć znaku większości >.

div>div

W efekcie osiągniemy:

<div>
    <div></div>
</div>

Element rodzeństwo

W celu utworzenia elementów znajdujących się na tym samym poziomie trzeba wykorzystać symbol dodawania +

div+div

Otrzymamy:

<div></div>
<div></div>

Przechodzenie do góry

Po utworzeniu elementu dziecka, może zajść konieczność przejścia do elementu będącego wyżej w strukturze, aby to uczynić należy wykorzystać do tego celu znak ^. Poniżej znajduje się przykład użycia.

div>h1^div

Z takiego zapisu wygenerowany zostanie poniższy kod

<div>
    <h1></h1>
</div>
<div></div>

Znak przechodzenia do góry można wykorzystać wiele razy. Jedno jego użycie powoduje przejście w górę o jeden poziom. Poniżej znajduje się przykład wielokrotnego użycia.

div>div>h1+p^^div

Kod html

<div>
    <div>
        <h1></h1>
        <p></p>
    </div>
</div>
<div></div>

Mnożenie

Za pomocą operatora * mamy możliwość utworzenia wielu takich samych elementów.

ul>li*5

Poniżej otrzymany kod

<ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>

Grupowanie

Istnieje również możliwość grupowania skrótów, dzięki czemu skróty stają się jeszcze prostsze, ponieważ nie wymagają używania tak wielu przejść do góry. Umożliwiają utworzenie komponentu wiele razy poprzez operator mnożenia. Grupę można traktować jako fragment kodu odpowiedzialny za wyświetlanie określonej części strony, np. nagłówka.

Poniżej przykład z części omawiającej przechodzenie do góry.

div>(div>h1+p)^div

Wygenerowany kod

<div>
    <div>
        <h1></h1>
        <p></p>
    </div>
</div>
<div></div>

Dzięki wykorzystaniu grupowania, potrzebowaliśmy użyć jednego przejścia do góry.

Operatory atrybutów

Wykorzystywane są do modyfikowania atrybutów wprowadzanych elementów.

Identyfikator

Do każdego wygenerowanego elementu możemy dodać identyfikator poprzez dodanie symbolu # oraz podanie jego nazwy.

[div#title]

Wygenerowany kod

<div id="title"></div>

Klasa

Każdy element może posiadać również klasę. Dodajemy ją za pomocą symbolu kropki ., następnie podajemy nazwę klasy. 

[div.title]

Otrzymujemy kod HTML

<div class="title"></div>

Inny atrybut

Mamy również możliwość tworzenia własnych atrybutów.

td[title="Hello world!" colspan=3]

W efekcie uzyskaliśmy:

<td title="Hello world!" colspan="3"></td>

W nawiasach kwadratowych możemy podać dowolną nazwę atrybutu. Wprowadzając wartość atrybutu nie musimy dodawać cudzysłowu, jeżeli wartość ta nie zawiera spacji. Możemy także wartość pozostawić pustą, wtedy zostanie dodany tabstop, jeżeli nasze IDE obsługuje tabstopy.

Automatyczne numerowanie

Emmet pozwala również na automatyczne numerowanie elementów podczas ich powielania za pomocą symbolu $.

div.cover$*5

W efekcie otrzymujemy

<div class="cover1"></div>
<div class="cover2"></div>
<div class="cover3"></div>
<div class="cover4"></div>
<div class="cover5"></div>

Dodatkowo mamy możliwość utworzenia numeracji składającej się, np. z trzech cyfr.

div.cover$$$*5

Wtedy otrzymamy

<div class="cover001"></div>
<div class="cover002"></div>
<div class="cover003"></div>
<div class="cover004"></div>
<div class="cover005"></div>

Możemy również określić kierunek numerowania wykorzystując do tego symbol @- lub @+, a także określić wartość początkową za pomocą zapisu @-N lub @N, gdzie N to wartość początkowa.

div.cover$$$@-10*5

Otrzymamy w efekcie klasy zaczynające się od cover014, a kończące się na cover010

<div class="cover014"></div>
<div class="cover013"></div>
<div class="cover012"></div>
<div class="cover011"></div>
<div class="cover010"></div>

Tekst

Każdy generowany element może zostać wypełniony tekstem, za pomocą klamer {} znajdujących się bezpośrednio za elementem.

p{Przykładowy tekst}

Otrzymany kod:

<p>Przykładowy tekst</p>

Lorem

Mamy również możliwość wygenerowania znanej wszystkim programistom frazy Lorem ipsum dolor sit. Poniżej kod

Kod Emmet

p>lorem

Kod HTML

<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Eum facere at explicabo maiores, consequatur dolor debitis, sapiente, eos labore consequuntur distinctio tempore. Numquam ullam aspernatur porro facere optio ratione nostrum!</p>

Domyślnie słowo kluczowe lorem tworzy cały akapit. Można go skrócić dodając do słowa kluczowego liczbę wyrazów z ilu ma się składać.

p>lorem10

Otrzymany kod HTML

<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. A, expedita?</p>

Podsumowanie

Jak mogliśmy zobaczyć we wcześniejszym rozdziale, Emmet pozwala nam na bardzo wiele i zdecydowanie skraca czas pisania kodu HTML. Na początku może się to wydawać zawiłe i skomplikowane, zwłaszcza łączenie wszystkich skrótów ze sobą w spójną całość. Po kilku próbach zacznie wychodzić coraz lepiej i pozwoli tworzyć bardziej złożony kod. Szybko przekonasz się, że Emmet to rozwiązanie, którego potrzebowałeś i nie będziesz wyobrażał sobie pisania kodu bez korzystania z niego.