Emmet oprócz przyśpieszenia pisania kodu HTML umożliwia również szybszą pracę z CSS. W tym artykule dowiesz się jak użyć tej wtyczki w pracy nad stylami strony.

Jak działa Emmet?

Działanie wtyczki polega na przekształcaniu skrótów na odpowiadające fragmenty kodu. Krótka demonstracja:

demo css

Ten przykład pokazuje jak szybko można pisać style CSS korzystając z Emmet. Przejdźmy do instalacji wtyczki.

Instalacja Emmet

Pierwszą rzeczą, którą musimy zrobić jest instalacja Emmet w edytorze kodu. Przejdź na tę stronę.

emmet download

Na tej stronie możesz sprawdzić instrukcję instalacji Emmet dla większości popularnych edytorów. Ja korzystam z Atoma, więc poniżej znajdziesz instrukcję instalacji w tym edytorze. Jeśli korzystasz z innego, to instrukcję znajdziesz na podanej stronie.

Instalacja Emmet w Atom

Otwórz edytor. Z menu wybierz element File -> Settings (lub użyj skrótu CTRL + przecinek). Z menu bocznego wybierz opcję Install. W wyszukiwarce wpisz emmet i naciśnij Enter.

install emmet

Interesuje nas pakiet emmet autorstwa emmetio. Kliknij INSTALL. Po kilku sekundach narzędzie powinno być już zainstalowane i gotowe do użycia.

emmet installed

Korzystanie z Emmet w CSS

Możemy teraz zacząć korzystać z Emmet w kodzie CSS. Utwórz nowy plik .css (może być całkowicie pusty). Przejdźmy do pierwszej funkcji.

Intuicyjne własności

Emmet udostępnia bardzo intuicyjne skróty do własności. Nawet jeśli nigdy wcześniej z nich nie korzystałeś, to bez problemu odgadniesz odpowiednie skróty. Przykłady: bg -> background, c -> color, ta -> text-align.

c | bg | ta | bdw | bxs -> Tab

skroty

Intuicyjne wartości

Kolejną przydatną funkcją są skróty do wartości. Oprócz własności podajemy jeszcze wartość np. d:b = display: block.

ta:c | m:a | td:n | o:h | d:b -> Tab

wartosci

Dodatkowe opcje

Emmet umożliwia wygenerowanie dodatkowych opcji, korzystając ze skrótu własności i znaku plusa.

f+ | bg+ | d+ -> Tab

opcje

Fuzzy Search

Zapamiętywanie skrótów dla kilkudziesięciu własności CSS może być problemem. Z pomocą przychodzi tzw. fuzzy search. Jeśli wpiszesz skrót, który nie istnieje to Emmet znajdzie najbliższe możliwe dopasowanie. Dzięki temu nie musimy zapamiętywać żadnych skrótów. Wystarczy kierować się intuicją i w zdecydowanej większości przypadków trafimy.

tu | ttu | tt:u | tt-u | tt-up -> Tab

fuzzy

Łączenie własności

Możemy łączyć reguły wstawiając pomiędzy nimi znak plusa.

bg+dib+ova -> Tab

laczenie

Pełną listę skrótów, z których możesz skorzystać znajdziesz tutaj.

  • Mateusz Pieszczyk

    Emmet jest świetny moim zdaniem zarówno do HTML jak i do CSS. Znacznie przyspieszył kodowanie i ułatwił mi pracę. Zastanawiam się tylko, czy ktoś stworzył coś podobnego z tym, że do JS.
    Osobiście korzystam z ATOM’a, ale na Sublime widziałem jak pewien developer użył ciągu 4 liter zatwierdzając jakimś klawiszem i dostał całą strukturę funkcji w JS.

  • Brudka

    No właśnie, ale powiedzcie czy jest sens używania emmeta dla css w takim sublime, który w menu kontekstowym na żywo podpowiada składnię pisanego parametru?
    Bo to takie dublowanie mechanizmów trochę.
    Rozumiem, gdzie jest mechanizm automatyzujący budowę struktury CSS, gdzie zamiast „na piechotę” to sobie szybko budujemy szkielet. Ale czy w tym przypadku warto wprowadzać coś dodatkowego?

    • Bartłomiej Mąkina

      Emmet jest czymś bardziej zaawansowanym niż dynamiczne podpowiedzi. Przed nim też korzystałem głównie z podpowiedzi, ale Emmet jest znacznie szybszy. Najlepiej sam spróbuj napisać z nim jakiś mały projekt i zobaczysz czy to coś dla Ciebie 🙂

      • Brudka

        Muszę w takim razie spróbować jego możliwości.
        Myślałem, że to kolejny mechanizm właśnie takich podpowiedzi, choć wiem że w HTML potrafi iteracyjnie tworzyć strukturę.
        Jednym słowem trzeba się za niego zabrać. 😉
        Dzięki 🙂

    • nrm

      Emmet to NIE podpowiedzi. Emmet to generowanie mniej lub bardziej zaawansowanych struktur. Zobacz na mój film: co z tego, że edytor Ci podpowie div/ul/li skoro i tak to wszystko musisz naklepać/skopiować/uzupełnić.

      • Brudka

        Chętnie skorzystam i ciekawy temat.
        Dzięki za objaśnienie. 🙂

    • Bartłomiej Mąkina

      Właśnie też zauważyłem na fb webMASTAH. Miejmy nadzieje, że dzięki temu więcej osób zacznie go używać 😀

    • Guy Diamond

      Na szczęście, jeden pokazuje jak działa w HTML a drugi w CSS 😉 Panowie dobra robota.

      • nrm

        Dokładnie to samo miałem napisać, pełne uzupełnienie 😉