介紹一款幫助您編寫現代 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 存儲庫中,可以找到可用插件的完整列表。
以下是我喜歡的一些插件:
- LostGrid 是一個 PostCSS 网格系統
- postcss-sassy 提供了類似 Sass 的 mixin
- postcss-nested 提供了使用 Sass 嵌套規則的能力
- postcss-nested-ancestors 在嵌套的 CSS 中引用任何祖先選擇器
- postcss-simple-vars 使用類似 Sass 的變量
- PreCSS 提供了 Sass 的許多功能,這是最接近完整的 Sass 替代方案
和 Sass 有何不同
或者其他 CSS 預處理器?
PostCSS 相對於像 Sass 或 Less 之類的 CSS 預處理器提供了一個主要的好處,那就是您可以選擇自己的路徑,並選擇您需要的功能,同時添加新的能力。Sass 或 Less 是固定的,它們提供了許多功能,可能您會用不到,且無法擴展它們。
“選擇自己的冒險” 的事實意味著您仍然可以在 PostCSS 旁邊使用任何其他你喜歡的工具。如果您希望使用 Sass,仍然可以使用它,並使用 PostCSS 執行 Sass 無法做到的其他事情,例如自動添加前綴或 linting。
您可以編寫自己的 PostCSS 插件來實現任何您想要的功能。