更便捷的css處理方式-postcss

更便捷的css處理方式-PostCSS

通常來講介紹一個東西都是要從是什麼，怎麼用的順序來說。我感受這樣很容易讓你們失去興趣，先看一下postcss能作點什麼，有興趣的話再往下看，不然可能沒有耐心看下去。讓咱們開始吧

postcss能作什麼

補全css屬性瀏覽器前綴

手寫的代碼能夠是這樣的:

.div{
    display: flex;
}

postcss能夠轉換以後成了這樣:

.div{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}

檢查css語法

body{
    color: #f0;
    }

會有如下提示:

src/er.css
 2:12  ✖  Unexpected invalid hex color "#f0"   color-no-invalid-hex



[18:27:28] 'css-lint' errored after 98 ms
[18:27:28] Error in plugin 'gulp-stylelint'
Message:
    Failed with 1 error

擁抱下個版本規範的css 即css4

對於下個規範的css而言，變量，方法等功能的都會增長上去，你能夠這樣來定義一個變量：

:root { 
    --red: #d33;
  }
  a { 
      color: var(--red);
  }

固然直接在現有瀏覽器上是跑不通的，就正如es2015剛開始同樣，咱們須要一個轉化器來將其轉成當前可用規範。postcss的插件就能夠作到。

a{
    color:#d33
}

除了上面以外還有其餘不少功能，postcss及其插件都能提供。

什麼是postcss

如今讓咱們回到最基本的問題，postcss是什麼。
援引官網的定義，一種使用js來轉化css的工具(A tool for transforming CSS with JavaScript)。其實咱們更多的時候提到postcss是有兩個含義的：

1. postcss自己，也就是咱們npm install時的安裝部分
   
2. 基於postCss的豐富插件系統。
   上文那些功能，都是基於postcss的插件提供的功能。

postcss自己並不直接用於處理樣式，只有配合它的插件，才能完成相關的編譯工做。

postcss不是預編譯語言的替代品

我想你腦海裏一直在復現兩個名詞，less/sass，開始的時候我也同樣，認爲postcss跟兩者同樣是一種css預編譯語言或者起到相似做用的一種語言。postcss不是要取代哪個，更多的是提供的一種補充，徹底能夠是互補的概念。
做爲一個是使用js將css轉化爲AST而後進行處理的工具，徹底不是預處理語言的替代品，postcss處理的必須是css文件，因此徹底能夠和預編譯語言結合，使用預編譯語言轉化爲css以後而後進行處理。
我一直認爲二者不是互斥的關係，徹底能夠互補使用。

爲何須要postcss

你們可能有這麼個疑問既然二者不互相沖突，目前我使用less/sass 也很容易知足個人需求，爲何要使用新的東西呢。我認爲主要緣由是其提供的豐富的插件功能，能夠工做更加的簡單化，便捷化，一句話，你只須要編寫基本的css，其餘的功能交給postcss就好。作了簡單的對比可能更加清晰明瞭。

實現給css屬性加上瀏覽器前綴的功能

對比一下less和postcss的實現：

一、 對於less而言，確定是寫一個方法

.flex-block() {
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
}
.test{
    .flex-block()
}

二、使用postcss

.test{
    display: flex;
}

只須要編譯的時候使用autoprefixer處理就好。
可能一個屬性的效果不是特別明顯，要是有不少個屬性須要處理呢?

.flex-block() {
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
}
.transform(){
    //僅僅是舉例子
}
.ccc(){
}
.test{
    .flex-block()
    .transform()
    .ccc()
}

這時候postcss仍是隻須要以下:

.test{
    display: flex;
    transform:rotate(7deg);
}

這時候就能看出來postcss的便捷性了，我一直認爲能夠抽象公共化的東西徹底沒有必要去重複的去手動開發。

postcss工做原理

postcss自己是一個node模塊，能夠將css文件解析爲抽象語法樹(AST)，將該樹在多個插件方法傳遞，而後將AST轉換爲字符串返回，該字符串能夠輸出到目標文件中。傳遞過程當中的插件能夠選擇是否改變該語法樹，上訴改變能夠經過sourcemap來記錄。以下面的流程所示(借用w3cplus的一張圖)：

其實這裏咱們更應該關聯起來的是babel，看一下功能：

• 將將來規範的轉化爲當前規範的轉義器
• 實現相同，都是將源文件解析爲AST而後經由插件處理。
• 豐富的插件，知足不一樣的需求
• 支持自定義插件的開發

當前工做流中引入postcss

你們可能會有這種想法，又是一種新的工具，我當前的開發框架中豈不是要大動。其實這種擔憂是不必的。postcss是很容易引入當前的工做流中的。不管是webpack仍是gulp，都有比較方便的方式。官方有詳細的介紹文檔

結束語

原先很早就看到postCss，當時太年輕認爲是less的一種替代品罷了，因此一直沒有去關注。瞭解以後感受真的不錯，至於如何使用這裏就不去演示了，有興趣的能夠查看下個人簡單示例但願更多的人使用。

參考文章

http://davidtheclark.com/its-time-for-everyone-to-learn-about-postcss/
http://julian.io/some-things-you-may-think-about-postcss-and-you-might-be-wrong/