/

PostCSS 簡介

PostCSS 簡介

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

簡介

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

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

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

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

為何如此受歡迎

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

安裝 PostCSS CLI

使用 Yarn：

1
yarn global add postcss-cli

或者使用 npm：

1
npm install -g postcss-cli

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

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

1
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。

示例：

1
2
3
a {
 display: flex;
}

編譯為：

1
2
3
4
5
6
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 插件來實現任何您想要的功能。

tags: [“CSS”, “PostCSS”, “CSS預處理器”, “Sass”, “Less”]