PostCSS (一)：認識 PostCSS

CoXie 發布于2019-08-29 13:09 / 3466人閱讀

摘要：一認識是一款對進行處理的工具。它主要依賴插件來進行操作。它可以作為一款前置處理器使用就像和等一樣，使用等插件來實現提供的變量，，選擇器嵌套，等功能。如果你不想自己配置，也可以使用一款已經打包好這些功能，語法與相似的插件來實現。

PostCSS (一)：認識 PostCSS

PostCSS 是一款對 CSS 進行處理的工具。它主要依賴插件來進行操作。當你需要某些功能的時候，只需配置相應的插件即可。它有非常非常豐富的插件，可以涵蓋你的開發過程的各個方面。即使沒有滿足你需要的插件，你也完全可以使用 JavaScript 來開發自己的插件就可以了。

它可以作為一款 CSS 前置處理器( preprocessor ) 使用, 就像 Sass 和 Less 等一樣，使用 postcss-simple-vars, postcss-mixins, postcss-nested, postcss-sass-extend 等插件來實現 Sass 提供的變量， mixin，選擇器嵌套，extend 等功能。如果你不想自己配置，也可以使用一款已經打包好這些功能，語法與 Sass 相似的插件precss 來實現preprocessor。

它也可以作為一款后處理器 (post processor)來使用，配合這些插件，滿足你的需求：

針對瀏覽器兼容：

如果你想使用未來的 CSS 特性那你可以使用cssnext ；

Autoprefixer，它根據 Can I use… Support tables for HTML5, CSS3, etc 上的數據給屬性添加相對應的瀏覽器前綴。

對老版本的瀏覽器沒有的屬性，有postcss-color-rgba-fallback, postcss-will-change等插件對其回退；

針對 CSS 優化

合并媒體查詢(media query)有 css-mqpacker 插件；

刪掉空格分號，最小化 CSS 文件，有cssnano插件；

提高開發效率

模塊化 CSS 有 postcss-import 插件通過@import整合所有模塊；

簡寫 CSS 屬性，比如margin-left寫作ml, 有postcss-crip插件；

引入第三方字體，postcss-font-magician 插件可以只指定font-family即可，@font-face的代碼由插件完成；

生成各種方向的圖形，有postcss-triangle插件生成三角形， postcss-circle生成圓形

生成網格系統，有lost 插件
…..

可以看到 PostCSS 的插件就像一座寶庫一樣，可以從各個方面滿足你，如果沒有你需要的，那就自己動手寫一個也是非常簡單的，PostCSS 提供了相應的 API ，只需要一些 JavaScript 代碼就能定制滿足自己需求的插件。

PostCSS 可以做這么多事，又這么方便簡單，你有沒有愛上它？

GPU云服務器云服務器 PostCSS 認識認識你深刻認識

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/112406.html

PostCSS 是個什么鬼東西？

摘要：參考的文章最權威的初認識一個不錯的東西理解等插件解析技術大漠的系列文章，應用型很強，推薦一個年齡差不多的開發者的解釋一篇稍微理論化解釋的文章一個開發模式簡單的優劣比較大家也可以直接閱讀我的博客前言最近大漠前輩在群里發關于PostCSS的系列文章，但是耗子姐姐又說看了有點云里霧里的感覺，所以這篇文章將按一個思考的角度來理解一下 PostCSS 到底是一個什么東西。 showImg(h...

IamDLY 2019-08-28 18:19 評論0 收藏0
PostCSS自學筆記（二）【番外篇二】

摘要：之前有研究過做過假設，在插件列表中，的插件執行順序自上而下，一切看起來似乎是沒有任何問題的。再有摘自深入設計摘自寫的姿勢這兩張圖則應該是說明了我之前的假設，插件中的執行順序自上而下。先來看看一片來自的這段會不會跟這個有關呢，我先埋個伏筆。圖解PostCSS的插件執行順序文章其實是一系列的早就寫完了. 才發現忘了發在SegmentFault上面, 最早發布于https://gitee...

FleyX 2019-08-30 13:57 評論0 收藏0
來學習一下怎么使用postcss吧

摘要：如何使用和上面的一樣，加入到即可，如下此處省略行此處省略行此處省略行為了驗證插件確實生效了，修改一下文件，如下執行再次重新打包，結果如下這里就介紹這兩個插件來拋磚引玉一下其實大部分都會使用已有的一些插件，而很少自己去造輪子。網上關于postcss是什么的介紹真的是太多了。。。簡單粗暴的說，postcss就是一款類似babel的樣式轉換器!多說無益，下面就用一個demo來演示一下pos...

張率功 2019-08-29 11:11 評論0 收藏0
談談PostCSS

摘要：它們有個統一的名字預處理器。面對以上問題，預處理器給出了非常可行的解決方案變量就像其他編程語言一樣，免于多處修改。回到話題中，之所以會出現向預處理器這樣子的解決方案，歸根結底還是標準發展的滯后性導致的。前言現在的前端，javascript的發展有目共睹，框架林立。同時，html也是齊頭并進，推出了HTML5標準，并且得到了普及。這樣的發展卻唯獨少了一個角色？ CSS，就是這個看似不...

高勝山 2019-08-30 13:47 評論0 收藏0
談談PostCSS

摘要：它們有個統一的名字預處理器。面對以上問題，預處理器給出了非常可行的解決方案變量就像其他編程語言一樣，免于多處修改。回到話題中，之所以會出現向預處理器這樣子的解決方案，歸根結底還是標準發展的滯后性導致的。前言現在的前端，javascript的發展有目共睹，框架林立。同時，html也是齊頭并進，推出了HTML5標準，并且得到了普及。這樣的發展卻唯獨少了一個角色？ CSS，就是這個看似不...

leap_frog 2019-08-21 17:05 評論0 收藏0