Emmet – Skróty CSS

bugajsky.pl 5 lat temu

W jednym z poprzednich wpisów – Emmet – Podstawy pokazałem jakie możliwości daje Emmet podczas pracy z plikami HTML. Omawiana wtyczka pozwala przyśpieszyć pisanie kodu nie tylko HTMLowego. W tym wpisie przedstawię możliwości jakie daje podczas pisania reguł CSS.

Skróty CSS

Emmet umożliwia pisanie adekwatności CSS dzięki skrótów. Nie ma możliwości tworzenia selektorów. Wtyczka posiada wiele predefiniowanych skrótów, dla przykładu podając m i wciskając przycisk tabulacji, w efekcie uzyskamy

margin: ;

W ten sposób otrzymaliśmy adekwatność odpowiadającą za utworzenie marginesu, która wymaga wprowadzenia dodatkowych danych. Mamy również możliwość automatycznego wypełnienia wartości z poziomu skrótu.

m10

Dzięki takiemu skrótowi otrzymamy

margin: 10px;

Możemy również dodać drugą wartość, wtedy musimy zastosować łącznik –.

m10-20

Otrzymamy

margin: 10px 20px;

Czasem zachodzi konieczność korzystania z wartości ujemnych. W takim przypadku wystarczy postawić minus przed odpowiednią wartością.

m10--20

Daje nam w efekcie

margin: 10px -20px;

Jendostki

Jak mogliśmy zobaczyć w powyższych przykładach, wprowadzane wartości domyślnie przyjmowały jednostkę px. W przypadku kiedy wprowadzona jednostka jest zmiennoprzecinkowa, wtedy po rozwinięciu skrótu otrzymamy jednostkę em.

Skrót

m5.5

Rozwinięcie

margin: 5.5em;

Poza tym Emmet pozwala jawnie określić jednostkę jaka ma zostać wstawiona w rezultacie wykonania skrótu.

m10rem

W efekcie otrzymamy

margin: 10rem;

W przypadku jawnego określenia jednostek nie ma konieczności oddzielania kolejnych wartości separatorem –.

m10rem15rem

Otrzymana adekwatność

margin: 10rem 15rem;

Wtyczka posiada również aliasy do najczęściej stosowanych jednostek podczas pracy z CSS.

m10p m10e m10x

Rezultat użycia skróconych nazw jednostek

margin: 10%; margin: 10em; margin: 10ex;

Kolory

Mamy również możliwość używania skrótów do wybierania kolorów dzięki zapisu szesnastkowego.

c#d

Efekt

color: #dddddd;

W tym przypadku # jest separatorem wartości, dzięki temu nie musimy używać łącznika –. Możemy korzystać z takiego zapisu kolorów w adekwatnościach łączących różne wartości ze sobą.

bd3#2s

Gdzie w efekcie otrzymamy

border: 3px #222 solid

Kolory możemy wprowadzić do skrótu dzięki czterech różnych sposobów

#d #d1 #d1a #d1acda

W rezultacie otrzymujemy

#dddddd #d1d1d1 #dd11aa #d1acda

Właściwości bez jednostek

Niektóre adekwatności CSS otrzymują wartości bezjednostkowe. Wtyczka rozpoznaje je i pozostawia te wartości bez jednostek.

z10 lh1 op.1 fw300

W wyniku końcowym dostajemy

z-index: 10; line-height: 1; opacity: 0.1; font-weight: 300;

!important

Co prawda NIE JEST ZALECANE!!! korzystanie ze słowa kluczowego !important, mimo to chciałbym pokazać, iż omawiana wtyczka ma możliwość w szybki sposób dodania tego słowa poprzez wstawienie na końcu każdego skrótu !.

m10!

W efekcie dostaniemy

margin: 10px !important;

Prefiksy

W CSS wykorzystywane są również adekwatności, które wymagają od programisty użycia prefiksów. Pozwalają poprawnie interpretować adekwatności danej przeglądarce internetowej. W tym miejscu również zastosowanie znalazł Emmet, przyśpieszając tworzenie adekwatności z prefiksami. Aby dodać niezbędne prefiksy wystarczy na samym początku skrótu dodać łącznik –.

-trs

Efekt działana skrótu

-webkit-transition: prop time; -moz-transition: prop time; -ms-transition: prop time; -o-transition: prop time; transition: prop time;

W niektórych środowiskach programistycznych, które obsługują tabstop zostają dodane zastępcze wartości, tak jak powyżej prop i time. Zmiana wartości w jednym miejscu, automatycznie dokona zmiany w pozostałych miejscach.

Jeżeli Emmet nie rozpoznał danej adekwatności, wtedy dodaje wszystkie możliwe prefiksy. Jest to bardzo pomocne w przypadku korzystania z adekwatności, które zostały niedawno zaimplementowane do przeglądarek.

-wlasciwosc

Otrzymamy

-webkit-wlasciwosc: ; -moz-wlasciwosc: ; -ms-wlasciwosc: ; -o-wlasciwosc: ; wlasciwosc: ;

Można również samemu zdecydować jakie prefiksy mają zostać dodane dzięki liter symbolizujących je.

-m-trs

Otrzymamy

-moz-transition: prop time; transition: prop time;

Litery symbolizujące dane prefiksy

* w - webkit * m - moz * s - ms * o - o

Gradienty

Emmet ułatwia również pisanie gradientów. Tworząc gradient programista musi pamiętać o dodaniu wszystkich prefiksów, a także wszystkich notacji, tak by gradienty działały na wszystkich obsługujących przeglądarkach. Wielu programistów do tego celu wykorzystuje wtyczki do IDE lub korzysta z generatorów dostępnych w sieci.

lg(left, blue 30%, red)

W efekcie otrzymamy

background-image: -webkit-linear-gradient(left, blue 30%, red); background-image: -moz-linear-gradient(left, blue 30%, red); background-image: -o-linear-gradient(left, blue 30%, red); background-image: linear-gradient(to right, blue 30%, red);

Złączenia

Podczas pisania kodu CSS z wykorzystaniem wtyczki Emmet, mamy również możliwość pisania wielu adekwatności jednocześnie.

m10+p5

W efekcie otrzymując odpowiednio sformatowany kod CSS.

margin: 10px; padding: 5px;

Inne przykładowe skróty

Każdą adekwatność możemy zapisać dzięki skrótu. Poniżej zamieszczam złożony skrót, za pomocą którego możemy zobaczyć jak duży potencjał drzemie w omawianej wtyczce.

posr+oh+h100+w100p+bd3#2s+bg#ca+c#3

W efekcie otrzymujemy

position: relative; overflow: hidden; height: 100px; width: 100%; border: 3px #222 solid; background: #cacaca; color: #333;

Podsumowanie

Jak mogliśmy zobaczyć w powyższych przykładach, Emmet pozwala przyśpieszyć pracę nie tylko podczas pisania HTMLa, ale także CSSa. Dzięki temu rozszerzeniu pisanie kodu staję się szybsze i przyjemniejsze. Pozwala zapomnieć o prefiksach poprzez automatyczne uzupełnianie. Niejednokrotnie programiści doszukiwali się błędów, spędzając godziny nad kodem, gdy problem stanowił brak prefiksów.

Przydatne linki

Główna strona Emmet.io

Spis wszystkich dostępnych skrótów

Jeżeli podoba Ci się to co robię na blogu, wesprzyj mnie obserwując moje profile społecznościowe Fanpage, Twitter oraz