資訊專欄INFORMATION COLUMN
摘要：一認(rèn)識(shí)是一款對(duì)進(jìn)行處理的工具。它主要依賴插件來進(jìn)行操作。它可以作為一款前置處理器使用就像和等一樣，使用等插件來實(shí)現(xiàn)提供的變量，，選擇器嵌套，等功能。如果你不想自己配置，也可以使用一款已經(jīng)打包好這些功能，語(yǔ)法與相似的插件來實(shí)現(xiàn)。
PostCSS (一)：認(rèn)識(shí) PostCSS
PostCSS 是一款對(duì) CSS 進(jìn)行處理的工具。它主要依賴插件來進(jìn)行操作。當(dāng)你需要某些功能的時(shí)候，只需配置相應(yīng)的插件即可。它有非常非常豐富的插件，可以涵蓋你的開發(fā)過程的各個(gè)方面。即使沒有滿足你需要的插件，你也完全可以使用 JavaScript 來開發(fā)自己的插件就可以了。
它可以作為一款 CSS 前置處理器( preprocessor ) 使用, 就像 Sass 和 Less 等一樣，使用 postcss-simple-vars, postcss-mixins, postcss-nested, postcss-sass-extend 等插件來實(shí)現(xiàn) Sass 提供的 變量， mixin，選擇器嵌套，extend 等功能。如果你不想自己配置，也可以使用一款已經(jīng)打包好這些功能， 語(yǔ)法與 Sass 相似的插件precss 來實(shí)現(xiàn)preprocessor。
它也可以作為一款 后處理器 (post processor)來使用，配合這些插件，滿足你的需求：
針對(duì)瀏覽器兼容：
如果你想使用未來的 CSS 特性那你可以使用cssnext ；
Autoprefixer，它根據(jù) Can I use… Support tables for HTML5, CSS3, etc 上的數(shù)據(jù)給屬性添加相對(duì)應(yīng)的瀏覽器前綴。
對(duì)老版本的瀏覽器沒有的屬性，有postcss-color-rgba-fallback, postcss-will-change等插件對(duì)其回退；
針對(duì) CSS 優(yōu)化
合并媒體查詢(media query)有 css-mqpacker 插件；
刪掉空格分號(hào)，最小化 CSS 文件，有cssnano插件；
提高開發(fā)效率
模塊化 CSS 有 postcss-import 插件通過@import整合所有模塊；
簡(jiǎn)寫 CSS 屬性，比如margin-left寫作ml, 有postcss-crip插件；
引入第三方字體，postcss-font-magician 插件可以只指定font-family即可，@font-face的代碼由插件完成；
生成各種方向的圖形， 有postcss-triangle插件生成三角形， postcss-circle生成圓形
生成網(wǎng)格系統(tǒng)，有lost 插件
…..
可以看到 PostCSS 的插件就像一座寶庫(kù)一樣，可以從各個(gè)方面滿足你，如果沒有你需要的，那就自己動(dòng)手寫一個(gè)也是非常簡(jiǎn)單的，PostCSS 提供了相應(yīng)的 API ， 只需要一些 JavaScript 代碼就能定制滿足自己需求的插件。
PostCSS 可以做這么多事，又這么方便簡(jiǎn)單，你有沒有愛上它？
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/112406.html
摘要：參考的文章最權(quán)威的初認(rèn)識(shí)一個(gè)不錯(cuò)的東西理解等插件解析技術(shù)大漠的系列文章，應(yīng)用型很強(qiáng)，推薦一個(gè)年齡差不多的開發(fā)者的解釋一篇稍微理論化解釋的文章一個(gè)開發(fā)模式簡(jiǎn)單的優(yōu)劣比較大家也可以直接閱讀我的博客 前言 最近大漠前輩在群里發(fā)關(guān)于PostCSS的系列文章，但是耗子姐姐又說看了有點(diǎn)云里霧里的感覺，所以這篇文章將按一個(gè)思考的角度來理解一下 PostCSS 到底是一個(gè)什么東西。 showImg(h...
摘要：之前有研究過做過假設(shè)，在插件列表中，的插件執(zhí)行順序自上而下，一切看起來似乎是沒有任何問題的。再有摘自深入設(shè)計(jì)摘自寫的姿勢(shì)這兩張圖則應(yīng)該是說明了我之前的假設(shè)，插件中的執(zhí)行順序自上而下。先來看看一片來自的這段會(huì)不會(huì)跟這個(gè)有關(guān)呢，我先埋個(gè)伏筆。 圖解PostCSS的插件執(zhí)行順序 文章其實(shí)是一系列的早就寫完了. 才發(fā)現(xiàn)忘了發(fā)在SegmentFault上面, 最早發(fā)布于https://gitee...
摘要：如何使用和上面的一樣，加入到即可，如下此處省略行此處省略行此處省略行為了驗(yàn)證插件確實(shí)生效了，修改一下文件，如下執(zhí)行再次重新打包，結(jié)果如下這里就介紹這兩個(gè)插件來拋磚引玉一下其實(shí)大部分都會(huì)使用已有的一些插件，而很少自己去造輪子。 網(wǎng)上關(guān)于postcss是什么的介紹真的是太多了。。。簡(jiǎn)單粗暴的說，postcss就是一款類似babel的樣式轉(zhuǎn)換器!多說無益，下面就用一個(gè)demo來演示一下pos...
摘要：它們有個(gè)統(tǒng)一的名字預(yù)處理器。面對(duì)以上問題，預(yù)處理器給出了非常可行的解決方案變量就像其他編程語(yǔ)言一樣，免于多處修改。回到話題中，之所以會(huì)出現(xiàn)向預(yù)處理器這樣子的解決方案，歸根結(jié)底還是標(biāo)準(zhǔn)發(fā)展的滯后性導(dǎo)致的。 前言 現(xiàn)在的前端，javascript的發(fā)展有目共睹，框架林立。同時(shí)，html也是齊頭并進(jìn)，推出了HTML5標(biāo)準(zhǔn)，并且得到了普及。這樣的發(fā)展卻唯獨(dú)少了一個(gè)角色？ CSS，就是這個(gè)看似不...
摘要：它們有個(gè)統(tǒng)一的名字預(yù)處理器。面對(duì)以上問題，預(yù)處理器給出了非?？尚械慕鉀Q方案變量就像其他編程語(yǔ)言一樣，免于多處修改。回到話題中，之所以會(huì)出現(xiàn)向預(yù)處理器這樣子的解決方案，歸根結(jié)底還是標(biāo)準(zhǔn)發(fā)展的滯后性導(dǎo)致的。 前言 現(xiàn)在的前端，javascript的發(fā)展有目共睹，框架林立。同時(shí)，html也是齊頭并進(jìn)，推出了HTML5標(biāo)準(zhǔn)，并且得到了普及。這樣的發(fā)展卻唯獨(dú)少了一個(gè)角色？ CSS，就是這個(gè)看似不...
閱讀 1413·2021-10-14 09:43
閱讀 1005·2021-09-10 10:51
閱讀 1457·2021-09-01 10:42
閱讀 2200·2019-08-30 15:55
閱讀 595·2019-08-30 15:55
閱讀 2355·2019-08-30 14:21
閱讀 1727·2019-08-30 13:04
閱讀 3478·2019-08-29 13:09
