整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
ostcss 一種對css編譯的工具，類似babel對js的處理，常見的功能如：
1 . 使用下一代css語法
2 . 自動補全瀏覽器前綴
3 . 自動把px代為轉換成rem
4 . css 代碼壓縮等等
postcss 只是一個工具，本身不會對css一頓操作，它通過插件實現功能，autoprefixer 就是其一。
less sass 是預處理器，用來支持擴充css語法。
postcss 既不是 預處理器也不是 后處理器，其功能比較廣泛，而且重要的一點是，postcss可以和less/sass結合使用
這里只說在webpack里集成使用，首先需要 loader
1 . 安裝
npm install postcss-loader –save-dev2 . webpack配置
一般與其他loader配合使用，下面*標部分才是postcss用到的
配合時注意loader的順序（從下面開始加載）
3 . postcss配置
項目根目錄新建 postcss.config.js文件，里面配置一些插件
注：也可以在webpack中配置
1 . Autoprefixer
前綴補全，全自動的，無需多說
安裝：
cnpm install Autoprefixer --save-dev2 . postcss-cssnext
使用下個版本的css語法【關于語法另一篇文章會單獨講】
安裝：
cnpm install postcss-cssnext --save-dev3 . postcss-pxtorem
把px轉換成rem
安裝：
cnpm install postcss-pxtorem --save-dev配置項：
特殊技巧:不轉換成rem
px檢測區分大小寫，也就是說Px/PX/pX不會被轉換，可以用這個方式避免轉換成rem
大致步驟：
在PostCSS中有幾個關鍵的處理機制：
Source string → Tokenizer → Parser → AST → Processor → Stringifier
將源css字符串進行分詞
舉個例子：
.className { color: #FFF; }通過Tokenizer后結果如下：
[
["word", ".className", 1, 1, 1, 10]
["space", " "]
["{", "{", 1, 12]
["space", " "]
["word", "color", 1, 14, 1, 18]
[":", ":", 1, 19]
["space", " "]
["word", "#FFF" , 1, 21, 1, 23]
[";", ";", 1, 24]
["space", " "]
["}", "}", 1, 26]
]以word類型為例，參數如下：
const token = [
// token 的類型，如word、space、comment
'word',
// 匹配到的詞名稱
'.className',
// 代表該詞開始位置的row以及column，但像 type為`space`的屬性沒有該值
1, 1,
// 代表該詞結束位置的row以及column，
1, 10
]經過Tokenizer之后，需要Parser將結果初始化為AST
this.root = {
type: 'root',
source: { input: {css: ".className { color: #FFF; }", hasBOM: false, id: "<input css 1>"},
start: { line: 1, column: 1 } ,
end: { line: 1, column: 27 }
},
raws:{after: "", semicolon: false}
nodes // 子元素
}經過AST之后，PostCSS提供了大量JS API給插件用
插件處理后，比如加瀏覽器前綴，會被重新Stringifier.stringify為一般CSS。
參考：
https://segmentfault.com/a/1190000017886402
https://www.jianshu.com/p/288963680642
作者：指尖跳動
鏈接：https://www.jianshu.com/p/9a9048bc8978
來源：簡書
著作權歸作者所有。商業轉載請聯系作者獲得授權，非商業轉載請注明出處。
官網介紹PostCss是一個允許使用JS插件轉換樣式的工具。這些插件可以檢查（lint）你的CSS，支持CSS Variables和Mixins，編譯尚未被瀏覽器廣泛支持的先進的CSS語法，內聯圖片，以及其它很多優秀的功能。
我們先來介紹一下它最出名的最實用的插件 autoprefixer
autoprefixer是一個讓你偷懶的神器。如果你的項目是PC端，并且產品大大或者項目大大要求你兼容低版本IE，各種瀏覽器，是不是很頭疼。別擔心，用了autoprefixer，寫正常的標準css就可以了，autoprefixer會自動幫你添加瀏覽器前綴哦。
這樣寫是不是很省事，很神奇。
除了這個用處外，國內外大佬們為它寫了非常多的插件。
這里為大家提供幾個插件。
cssnext
cssnext能夠讓你使用下一代css語法，如目前css4還沒有各瀏覽器支持，但是可以使用cssnext來把css4的語法翻譯成css3
posts-px2rem
使用移動適配問題的插件
posts-partial-import
讓你的css文件支持@import
precss
這是一個大雜燴，主要是為了滿足SASS開發者的習慣，繼承了很多插件。
postcss-mixins 一個和SASS的mixins用法相同的插件
postcss-atroot 讓你的嵌套css處于根部
posts-extend 有相同結構卻有那么一點點的區別，用這個可以方便同意管理相同部分樣式代碼
這里簡單展示一下webpack+postcss得使用
首先需要安裝webpack中postcss得解析器 postcss-loader 還有我們需要使用得庫，這里我們只使用autoprefixer
$ yarn add postcss-loader $ yarn add autoprefixer
之后在webpack.config.js module rule中加入postcss-loader
最后我們還得寫postcss.config.js，添加你加入的那些插件，我們這邊只使用了autoprefixer
這樣我們就配置完成了個簡單的postcss得項目了。
之后我會更加深入了解一下postcss其它插件得使用，會在以后為大家詳解。
希望大家喜歡，可以多多關注一下我。
ostCSS是一個非常通用的工具，它可以通過javascript插件轉換CSS樣式。它的靈活性在于它的建造方式。
PostCSS的核心部分是一個node.js模塊，您可以使用NPM進行安裝，它有一個由200多個插件組成的生態系統，您可以在項目中選擇使用這些插件。
PostCSS既不是預處理器，也不是后處理器，因為不同的PostCSS插件可能屬于這兩類中的任何一類，或者同時屬于這兩類；它完全取決于您對它的理解。使用PostCSS，您不需要學習不同的語法，比如sass或Less；您可以立即開始使用它。
PostCSS獲取現有的css文件并將其轉換為javascript可讀數據，然后javascript插件執行修改，postss返回原始文件的修改版本。聽起來很酷，不是嗎？
在這篇文章中，我們將查看6個Postcss插件，讓您了解使用這個出色的工具可以實現的一些偉大的事情。
Autoprefixer
autoprefixer可能是最知名的postcss插件，因為它被谷歌、Twitter和Shopify等知名科技公司使用。它在必要的地方向CSS規則添加供應商前綴。
autoprefixer使用我可以使用的數據。這樣它就不會過時，而且可以應用最新的規則。您可以在它的交互式演示站點上查看它的工作原理。
CSSnext
cssnext是一個CSS發起者，它允許您在當前站點上使用未來的CSS語法。W3C有許多新的CSS規則，這些規則目前沒有被瀏覽器實現，但可以使開發人員更快、更容易地編寫更復雜的CSS。cssnext是用來彌補這個缺口的。
值得一看它的特性，看看你能用它完成什么，例如你可以在你的設計中使用自定義媒體查詢、自定義選擇器、顏色修改器、SVG過濾器和新的偽類。
PreCSS
PreCSS是一個postcss插件，工作方式類似于css預處理器。它可以利用樣式文件中的標記之類的SASS。
通過在工作流中引入PreCSS，您可以在CSS代碼中使用變量if else語句、for循環、mixin、@extend和@import規則、嵌套和許多其他方便的功能。PreCSS的Github文檔為您提供了如何充分利用它的詳細說明。
StyleLint
StyleLint是一個現代的CSS Linter，它可以校對和驗證您的CSS代碼。它使避免錯誤變得容易，并促使您遵循一致的編碼約定。
Stylelint了解最新的CSS語法，因此它可以與前面提到的precss插件一起使用。它還允許您進行自己的配置，甚至檢查設置是否有效。
PostCSS Assets
PostssAssets插件是一個方便的CSS文件資源管理器。如果您在URL路徑方面遇到問題，這是一個很好的選擇，因為PostSS資產將樣式表文件與環境變化隔離開來。
您需要定義加載路徑、相對路徑和基本路徑，插件將自動查找您需要的資源。例如，如果需要foobar.jpg圖像的正確URL，可以編寫以下代碼：
body {
background: resolve('foobar.jpg');
}
Postcss Assets還負責節省緩存，因為如果希望在修改資產時自動更改URL路徑，可以將cachebuster變量設置為true。這個智能插件還可以計算圖像文件的尺寸（寬度和高度），甚至可以使用預設比例調整它們的大小
CSSNano
如果您需要一個生產站點的優化和縮小的CSS文件，那么有必要查看cssnano。它是一個模塊化的插件，由許多較小的單一責任PostSS插件組成。它不僅執行基本的縮小技術，如刪除空白，還具有高級選項，使集中優化成為可能。
除了許多其他功能外，cssnano還能夠重新調整z-index值、減少自定義標識符、轉換長度、時間和顏色值以及刪除過時的供應商前綴。
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
