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

什么是postcss

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

1 . 使用下一代css語法

2 . 自動補全瀏覽器前綴

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

4 . css 代碼壓縮等等

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

與 less sass 的區(qū)別

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

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

關于取舍

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

以下是個人的總結：

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

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

總體來說區(qū)別不大，看個人喜好吧

如何使用

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

1 . 安裝

npminstallpostcss-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檢測區(qū)分大小寫，也就是說Px/PX/pX不會被轉換，可以用這個方式避免轉換成rem

總結

以上是生活随笔為你收集整理的PostCSS是什么的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。