Zarządzanie CSS może być trudne, zwłaszcza w przypadku witryny o rozsądnej wielkości. Uzyskaj pomocną dłoń z tym preprocesorem.

Załóżmy, że dowiadujesz się o naprawdę fajnej funkcji CSS, takiej jak zagnieżdżanie. Ale kiedy spróbujesz, zdasz sobie sprawę, że wsparcie jest okropne i miną lata, zanim będziesz mógł z niego w końcu skorzystać. Był to ogromny problem w CSS, aż do wprowadzenia preprocesorów, takich jak PostCSS.

Dowiedz się, w jaki sposób PostCSS umożliwia korzystanie z nowoczesnego i przyszłego CSS już dziś podczas programowania. Dowiesz się dokładnie, czym jest PostCSS, jak możesz go używać i jak najlepiej wykorzystać jego możliwości.

Konfigurowanie projektu

Przejdź do pustego folderu, utwórz plik o nazwie index.html i dodaj w nim następujące znaczniki HTML:

HTML>
<HTMLlang="pl">
<głowa>
<połączyćrel=„arkusz stylów”href="źródło/style.css">
głowa>


<ciało>
<P>UstępP>
<dz>dzdz>
ciało>
HTML>

Ten dokument HTML renderuje akapit i element. Importuje również plik arkusza stylów o nazwie style.css

instagram viewer
czyli wewnątrz źródło teczka. Utwórz plik w formacie źródło folder i dołącz następujące reguły stylów CSS:

ciałoP {
kolor: Pomarańczowy;
}
ciałodz {
kolor: niebieski;
}
ciało {
wyświetlacz: siatka;
}

Ten CSS stylizuje kolor obu elementów na stronie i tworzy układ siatki. Większość przeglądarek obsługuje normalną składnię CSS, taką jak ta. Ale kiedy spojrzysz na nowszą składnię, będziesz musiał wprowadzić PostCSS.

Tworzenie projektu Node.js i instalacja PostCSS

Mówiąc prościej, PostCSS umożliwia konwersję nowoczesnego CSS na coś, co może zrozumieć większość przeglądarek; proces powszechnie znany jako transpilacja. Jest to idealne rozwiązanie, jeśli chcesz wypróbować w swoim kodzie nowe, eksperymentalne lub niestandardowe właściwości CSS, których główne przeglądarki mogą nie obsługiwać.

PostCSS oferuje również bogaty ekosystem wtyczek JavaScript, które można zainstalować, aby włączyć niektóre funkcje, takie jak minimalizacja CSS, obsługa kolorów i obsługa lintingu.

Aby użyć PostCSS, pierwszą rzeczą, którą musisz zrobić, to zainicjować nowy projekt Node.js:

npm init -y

To polecenie wygeneruje plik package.json zawierający wartości domyślne dla Twojej aplikacji.

Następnie zainstaluj PostCSS i PostCSS CLI. Drugi pakiet umożliwia uruchomienie PostCSS z wiersza poleceń:

npm i --save-dev postcss postcss-cli

The --save-dev flag instaluje oba pakiety npm jako zależności dev; będziesz używać tylko PostCSS i jego wtyczek do przetwarzania kodu CSS podczas programowania.

Aby rozpocząć korzystanie z PostCSS przez interfejs linii komend, wejdź do swojego pakiet.json plik i utwórz proste kompilacja: css polecenie do transpilacji za pomocą PostCSS:

„skrypty”: {
„kompilacja: css”: "postcss src/styles.css --dir dest -w"
}

To polecenie zajmie twój goły CSS (przechowywany w src/styles.css), przetransponuj kod, a następnie wyślij go do pliku cel teczka. Uruchamianie kompilacja npm: css polecenie tworzy ten folder i zapełnia go plikiem style.css plik zawierający kod czytelny dla przeglądarki.

Podczas importowania CSS do HTML upewnij się, że importujesz z folderu docelowego, w którym kompilujesz CSS, a nie z folderu źródłowego, z którego kompiluje PostCSS. To w naszym przypadku jest tzw dyst folder, a nie źródło teczka.

Jeśli otworzysz swoją witrynę w przeglądarce, zobaczysz, że witryna nadal korzysta z CSS. Za każdym razem, gdy dokonasz zmian w pliku źródłowym, PostCSS ponownie skompiluje kod, a zmiany zostaną odzwierciedlone na stronie internetowej.

Korzystanie z wtyczek PostCSS

Istnieją setki wtyczki PostCSS do dodawania prefiksów, lintingu, obsługi nowej składni i dziesiątek innych funkcji PostCSS. Po zainstalowaniu wtyczki PostCSS aktywujesz ją w pliku postcss.config.js plik — plik JavaScript, którego możesz użyć do ustawienia wszystkich konfiguracji dla PostCSS.

Zainstaluj cssnano Wtyczka PostCSS za pomocą następującego polecenia:

npm i --save-dev cssnano

Ponownie wystarczy zapisać te zależności jako zależności dev. Powodem jest to, że wszystko to dzieje się, gdy się rozwijasz. Nie potrzebujesz PostCSS ani żadnej z jego wtyczek po przekazaniu witryny do produkcji.

Aby użyć nowo zainstalowanej wtyczki cssnano, musisz dodać następujący kod do pliku postcss.config.js plik:

konst cssnano = wymagać(„cssnano”)
moduł.eksport = {
 wtyczki: [
 cssnano({
 ustawienie wstępne: „domyślne”
 })
 ]
}

Teraz, jeśli wrócisz do terminala i ponownie uruchomisz komendę build, zmniejszy to wyjściowy CSS (tj. Sprawi, że kod będzie tak mały, jak to tylko możliwe). Kiedy więc wypychasz witrynę gotową do produkcji, sprawisz, że Twój CSS będzie tak mały, jak to tylko możliwe.

Korzystanie z nowoczesnych funkcji, takich jak zagnieżdżanie

Załóżmy, że chcesz użyć składni zagnieżdżania w swoim arkuszu stylów, więc zamieniasz blok akapitu w src/styles.css z tym:

ciało {
 & P {
kolor: Pomarańczowy;
 }
}

Ten kod jest taki sam jak wersja w twoim kodzie startowym. Ale spowoduje to błąd, ponieważ składnia jest bardzo nowa, a większość przeglądarek internetowych jej nie obsługuje. Możesz włączyć obsługę tej składni w PostCSS, instalując plik postcss-preset-env podłącz.

Wtyczka kompiluje razem kilka różnych wtyczek do obsługi CSS w zależności od tego, na jakim etapie jest. Etap 0 reprezentuje supereksperymentalne funkcje, które mogą nawet nie znaleźć się w CSS. Natomiast etap 4 dotyczy funkcji językowych, które są już częścią specyfikacji CSS.

Domyślnie, teraźniejszość wykorzystuje funkcje etapu 2 (które najprawdopodobniej trafią do CSS). Ale możesz zmienić etap na dowolny w pliku konfiguracyjnym.

Aby zainstalować wtyczkę, uruchom następujące polecenie:

npm i --save-dev postcss-preset-env

Wtedy w twoim postcss.config.js plik, należy zaimportować wtyczkę i zarejestrować ją:

konst cssnano = wymagać(„cssnano”)
konst postcssPresetEnv = wymagać("postcss-preset-env")
moduł.eksport = {
 wtyczki: [
 cssnano({
 ustawienie wstępne: „domyślne”
 }),
 postcssPresetEnv({ scena: 1})
 ]
}

Powinieneś przejść tylko etap nowego kodu CSS, którego zamierzasz użyć. W tym przypadku zakładamy, że funkcja zagnieżdżania znajduje się na etapie 1. Gdy ponownie uruchomisz komendę build i sprawdzisz przeglądarkę, zobaczysz, że skompilowała zagnieżdżony kod do standardowego CSS, który przeglądarka może zrozumieć.

Używanie PostCSS z frameworkami

Ręczna konfiguracja PostCSS może być trochę uciążliwa. Właśnie dlatego prawie wszystkie nowoczesne frameworki są dostarczane z narzędziami do łączenia (np. Vite, Snowpack i Parcel), a narzędzia te będą miały wbudowaną obsługę PostCSS. A nawet jeśli nie, proces dodawania obsługi PostCSS jest niezwykle łatwy.

Zawsze pamiętaj, że Vite i większość innych programów pakujących używa System modułów ES6, a nie CommonJS. Aby to obejść, musisz użyć import oświadczenie zamiast wymagać() w Twoim postcssconfig.js plik:

import cssnano z„cssnano”
// Kod konfiguracyjny trafia tutaj

Dopóki masz zainstalowane wtyczki, wszystko będzie działać dobrze.

Dowiedz się więcej o SaSS

PostCSS to tylko jeden z kilkudziesięciu dostępnych obecnie preprocesorów CSS. Jednym z nich jest SaSS, który oznacza niesamowite pod względem składni arkusze stylów.

Nauka korzystania z innego głównego preprocesora może przydać się programistom CSS.