介紹一款幫助您編寫現代 CSS 的優秀工具:PostCSS。PostCSS 是一個非常流行的工具,允許開發者編寫 CSS 預處理器或後處理器。

簡介

PostCSS 是一個工具,允許開發者編寫 CSS 預處理器或後處理器,稱為插件。有許多插件提供了許多功能,有時候 “PostCSS” 這個詞代表的是工具本身,以及插件生態系統。

PostCSS 插件可以通過命令行運行,但通常是在構建時由任務運行程序調用的。

插件化的架構為您所需的所有與 CSS 相關的操作提供了一個共同的基礎。

注意:儘管叫做 PostCSS,它不僅僅是 CSS 後處理器,但它可以用於構建它們,以及其他東西

為何如此受歡迎

PostCSS 提供了幾個功能,可以深度改善您的 CSS,並與您選擇的任何構建工具良好集成。

安裝 PostCSS CLI

使用 Yarn

yarn global add postcss-cli

或者使用 npm

npm install -g postcss-cli

完成之後,postcss 命令將在您的命令行中可用。

例如,此命令將在 css/ 文件夾中包含的 CSS 文件上運行 autoprefixer 插件,並將結果保存在 main.css 文件中:

postcss --use autoprefixer -o main.css css/\*.css

有關 PostCSS CLI 的更多信息,請參閱 https://github.com/postcss/postcss-cli

最受歡迎的 PostCSS 插件

PostCSS 為您的 CSS 處理提供了一個共同的接口,其中包含一些出色的工具。

以下是一些最受歡迎的插件,讓您瞭解使用 PostCSS 可以做些什麼。

Autoprefixer

Autoprefixer 解析您的 CSS,並確定某些規則是否需要供應商前綴。

它根據 Can I Use 的數據進行操作,因此您無需擔心某個功能是否需要前綴,或者您使用的前綴現在是否因為過時而不再需要。

您可以編寫更乾淨的 CSS。

示例:

a {
 display: flex;
}

編譯為:

a {
 display: -webkit-box;
 display: -webkit-flex;
 display: -ms-flexbox;
 display: flex;
}

cssnext

https://github.com/MoOx/postcss-cssnext

該插件是 CSS 的 Babel,可讓您使用現代 CSS 功能,同時負責將它們轉譯為更適合舊版瀏覽器的 CSS:

  • 使用 Autoprefixer 增加前綴(因此如果使用此插件,無需直接使用 Autoprefixer)
  • 允許您使用 CSS 變量
  • 允許您使用像 Sass 中的嵌套

以及許多其他功能

CSS Modules

PostCSS Modules 允許您使用 CSS Modules。

CSS Modules 不是 CSS 標準的一部分,但它們是用於具有作用域選擇器的構建步驟處理過程。

csslint

Linting 幫助您編寫正確的 CSS,並避免錯誤或陷阱。stylint 插件允許您在構建時對 CSS 進行 linting。

cssnano

cssnano 壓縮您的 CSS 並進行代碼優化,以在生產中傳送最少量的代碼。

其他有用的插件

在 PostCSS GitHub 存儲庫中,可以找到可用插件的完整列表

以下是我喜歡的一些插件:

和 Sass 有何不同

或者其他 CSS 預處理器?

PostCSS 相對於像 Sass 或 Less 之類的 CSS 預處理器提供了一個主要的好處,那就是您可以選擇自己的路徑,並選擇您需要的功能,同時添加新的能力。Sass 或 Less 是固定的,它們提供了許多功能,可能您會用不到,且無法擴展它們。

“選擇自己的冒險” 的事實意味著您仍然可以在 PostCSS 旁邊使用任何其他你喜歡的工具。如果您希望使用 Sass,仍然可以使用它,並使用 PostCSS 執行 Sass 無法做到的其他事情,例如自動添加前綴或 linting。

您可以編寫自己的 PostCSS 插件來實現任何您想要的功能。