10 niesamowitych wtyczek PostCSS, aby uczynić z Ciebie kreatora CSS

PostCSS to niezwykle wszechstronne narzędzie, które umożliwia przekształcaj style CSS za pomocą wtyczek JavaScript. Jego elastyczność polega na sposobie jego budowy.

Podstawową częścią PostCSS jest moduł Node.js, który można zainstalować za pomocą npm, a także ekosystem ponad 200 wtyczek, które można wykorzystać w projekcie.

PostCSS nie jest ani preprocesorem, ani postprocesorem, ponieważ różne wtyczki PostCSS mogą należeć do jednej z tych kategorii lub obu; to zależy wyłącznie od ciebie, co z tego zrobisz. Z PostCSS, ty nie musisz uczyć się innej składni jak w przypadku Sass lub LESS; możesz natychmiast zacząć z niego korzystać.

PostCSS pobiera istniejący plik CSS i przekształca go w dane odczytywalne przez JavaScript, a następnie wtyczki JavaScript wykonują modyfikacje, a PostCSS zwraca zmienioną wersję oryginalnego pliku. Brzmi fajnie, prawda??

W tym poście przyjrzymy się 10 wtyczkom PostCSS do daje ci wgląd w niektóre z wielkich rzeczy, które możesz osiągnąć z tym wspaniałym narzędziem.

1. Autoprefixer

Autoprefixer jest prawdopodobnie najbardziej znaną wtyczką PostCss, ponieważ jest używana przez znane firmy technologiczne, takie jak Google, Twitter i Shopify. To dodaje prefiksy dostawcy do reguł CSS tam, gdzie jest to konieczne.

Autoprefixer używa danych z Can I Use. W ten sposób nie ma daty i może zawsze stosować najnowsze reguły. Możesz sprawdzić, jak działa na interaktywnej stronie demonstracyjnej.

2. CSSnastęp

CSSnastępnie to transpiler CSS pozwala na użycie przyszłej składni CSS na bieżących stronach. W3C ma wiele nowych reguł CSS, które nie są obecnie implementowane przez przeglądarki, ale może umożliwić programistom szybsze i łatwiejsze pisanie bardziej zaawansowanych CSS. CSSnext został stworzony, aby wypełnić tę lukę.

Warto spojrzeć na jego funkcje, aby zobaczyć, co można z nim zrobić, na przykład można używaj niestandardowych zapytań o media, niestandardowych selektorów, modyfikatorów kolorów, filtrów SVG i nowych pseudoklas w twoich projektach.

3. PreCSS

PreCSS jest jedną z wtyczek PstCSS, które działają jak preprocesor CSS. To umożliwia skorzystaj ze znaczników typu Sass w plikach arkusza sytlesheet.

Wprowadzając PreCSS do swojego przepływu pracy, możesz używać zmiennych, Jeśli inaczej sprawozdania, dla pętle, miksy, @poszerzać i @import reguły, zagnieżdżanie i wiele innych przydatnych funkcji w kodzie CSS. Dokumentacja Github w PreCSS zawiera szczegółowe instrukcje, jak najlepiej ją wykorzystać.

4. StylLint

StylLint to nowoczesny linter CSS weryfikuje i weryfikuje kod CSS. Ułatwia unikanie błędów i popycha do przestrzegania spójnych konwencji kodowania.

StyleLint rozumie najnowszą składnię CSS, więc może być używany razem z wcześniej wspomnianą wtyczką PreCSS. Umożliwia także tworzenie własnej konfiguracji, a nawet sprawdza, czy ustawienia są prawidłowe.

5. Zasoby PostCSS

Wtyczka PostCSS Assets jest przydatna menedżer zasobów dla plików CSS. Może to być świetny wybór, jeśli masz problemy ze ścieżkami URL, ponieważ zasoby PostCSS izolują pliki arkuszy stylów od zmian środowiskowych.

Musisz zdefiniować ścieżki ładowania, ścieżki względne i ścieżkę podstawową, a wtyczka automatycznie wyszuka potrzebne zasoby. Na przykład możesz napisać następujący kod, jeśli potrzebujesz właściwego adresu URL foobar.jpg obraz:

 body background: resolve ('foobar.jpg'); 

Zasoby PostCSS również dba o pamięć podręczną zasobów, jak możesz ustawić cachebuster zmienna na true, jeśli chcesz, aby ścieżki URL były automatycznie zmieniane w przypadku modyfikacji zasobu. Ta inteligentna wtyczka oblicza również wymiary (szerokość i wysokość) plików obrazów, a nawet zmienia ich rozmiar przy użyciu wstępnie ustawionego stosunku.

6. CSSNano

Jeśli potrzebujesz zoptymalizowanych i zminimalizowanych plików CSS dla zakładu produkcyjnego, warto to sprawdzić CSSNano. Jest to modułowa wtyczka składająca się z wielu mniejszych wtyczek PostCSS o pojedynczej odpowiedzialności. Nie tylko wykonuje podstawowe techniki minimalizacji, takie jak usuwanie białych znaków, ale ma także zaawansowane opcje, które umożliwiają zogniskowaną optymalizację.

Wśród wielu innych funkcji, CSSNano jest zdolny do zmiany wartości indeksu Z, redukcji niestandardowych identyfikatorów, konwersji długości, czasu i wartości kolorów oraz usuwania przestarzałych prefiksów dostawcy.

7. Czcionka Magik

Jeśli jesteś fanem wyrafinowanej typografii, z pewnością spodoba ci się Czcionka Magik Wtyczka PostCSS. Magia Font Magician polega na jego możliwościach automatycznie generuje wszystkie niezbędne @ font-face zasady.

Jak to działa jest całkiem proste, wystarczy dodać font-family: „My Fav Font”; Reguła CSS do elementu HTML, a Font Magician wykonuje resztę pracy. Może dodawać czcionki Google, lokalną kopię czcionki, typografię Bootstrap, a także ładować czcionki asynchronicznie. Oto jego interaktywna strona demonstracyjna.

8. Napisz SVG

Czy zastanawiałeś się kiedyś, jak fajnie byłoby napisać SVG bezpośrednio do plików CSS? Z pomocą wtyczki Write SVG PostCSS możesz łatwo osiągnąć ten cel.

Ta poręczna wtyczka umożliwia na przykład przechowuj tła i ikony SVG w pliku CSS, i później dodaj je do odpowiedniego elementu HTML w następujący sposób:

 @svg square @rect fill: var (- color, black); szerokość: 100%; wysokość: 100%;  .example tło: biały svg (kwadratowy param (- kolor # 00b1ff)) okładka; 

9. Lost Grid

Lost Grid to świetna wtyczka PostCSS, która zapewnia imponujące System siatki CSS to nie tylko działa ze zwykłym CSS ale także z języki preprocesora (Sass, LESS, Stylus). Używa calc () Funkcja CSS pozwala tworzyć piękne siatki, z których można łatwo korzystać, nie tracąc czasu na dostosowanie.

Lost Grid ma prawie proste zasady, na przykład zdefiniowanie kolumny o 25% szerokości nie zajmuje więcej niż ten mały fragment kodu:

 div lost-column: 1/4; 

10. Sprite PostCSS

The PostCSS Sprite wtyczka ułatwia generuj obrazki duchów, tj. zbiory obrazów umieszczone w jednym pliku. Po ustawieniu kilku opcji wtyczka pobiera obrazy z pliku arkusza stylów, scala je w ikonkę, a następnie aktualizuje odnośniki do obrazów wszędzie tam, gdzie jest to konieczne.

Możesz użyć różnych filtrów i gruperów, aby określić, które obrazy chcesz umieścić w ikonce, a także możesz ustawić wymiary obrazu wyjściowego..