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 właściwości CSS za pomocą 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 właściwość 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 właściwość
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 za pomocą 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 właściwoś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 za pomocą czterech różnych sposobów
#d #d1 #d1a #d1acda
W rezultacie otrzymujemy
#dddddd #d1d1d1 #dd11aa #d1acda
Właściwości bez jednostek
Niektóre właściwoś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ć, że 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ż właściwości, które wymagają od programisty użycia prefiksów. Pozwalają poprawnie interpretować właściwości danej przeglądarce internetowej. W tym miejscu również zastosowanie znalazł Emmet, przyśpieszając tworzenie właściwoś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 właściwości, wtedy dodaje wszystkie możliwe prefiksy. Jest to bardzo pomocne w przypadku korzystania z właściwoś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 za pomocą 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 właściwości jednocześnie.
m10+p5
W efekcie otrzymując odpowiednio sformatowany kod CSS.
margin: 10px; padding: 5px;
Inne przykładowe skróty
Każdą właściwość możemy zapisać za pomocą skrótu. Poniżej zamieszczam złożony skrót, dzięki któremu 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
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 Instagram. Dzięki temu nie ominie Cie żaden wpis.
No i super, już zapomniałem o emmecie w CSS a przecież to taka świetna sprawa. Dzięki! 😀