PostCSS是什么

本篇內容介紹了“PostCSS是什么”的有關知識，在實際案例的操作過程中，不少人都會遇到這樣的困境，接下來就讓小編帶領大家學習一下如何處理這些情況吧！希望大家仔細閱讀，能夠學有所成！

什么是postcss

postcss 一種對css編譯的工具，類似babel對js的處理，常見的功能如：

1 . 使用下一代css語法

2 . 自動補全瀏覽器前綴

3 . 自動把px代為轉換成rem（rem不熟悉的，點這）

4 . css 代碼壓縮等等

postcss 只是一個工具，本身不會對css一頓操作，它通過插件實現功能，autoprefixer 就是其一。

與 less sass 的區別

less sass 是預處理器，用來支持擴充css語法。

postcss 既不是 預處理器也不是 后處理器，其功能比較廣泛，而且重要的一點是，postcss可以和less/sass結合使用

關于取舍

雖然可以結合less/sass使用，但是它們還是有很多重復功能，用其中一個基本就 ok 了。

以下是個人的總結：

• postcss 鼓勵開發者使用規范的CSS原生語法編寫源代碼，支持未來的css語法，就像babel支持ES6。

• less、sass 擴展了原生的東西，它把css作為一個子集，但這不好保持向后兼容。

總體來說區別不大，看個人喜好吧

如何使用

這里只說在webpack里集成使用，首先需要 loader

1 . 安裝

npm install postcss-loader –save-dev

2 . webpack配置

一般與其他loader配合使用，下面*標部分才是postcss用到的

配合時注意loader的順序（從下面開始加載）

3 . postcss配置

項目根目錄新建 postcss.config.js文件，里面配置一些插件

注：也可以在webpack中配置

常用的postcss插件

1 . Autoprefixer

前綴補全，全自動的，無需多說

安裝：

cnpm install Autoprefixer --save-dev

2 . postcss-cssnext

使用下個版本的css語法

安裝：

cnpm install postcss-cssnext --save-dev

3 . postcss-pxtorem

把px轉換成rem

安裝：

cnpm install postcss-pxtorem --save-dev

配置項：

特殊技巧:不轉換成rem

px檢測區分大小寫，也就是說Px/PX/pX不會被轉換，可以用這個方式避免轉換成rem

“PostCSS是什么”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業相關的知識可以關注億速云網站，小編將為大家輸出更多高質量的實用文章！