更便捷的css處理方式-PostCSS

瀟湘待雨發表於2017-12-25
CSS

一般來說介紹一個東西都是要從是什麼，怎麼用的順序來講。我感覺這樣很容易讓大家失去興趣，先看一下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的實現：

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

.flex-block() {
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
}
.test{
    .flex-block()
}
複製程式碼

2、使用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的一張圖)： 更便捷的css處理方式-PostCSS

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

  • 將未來規範的轉化為當前規範的轉義器
  • 實現相同，都是將原始檔解析為AST然後經由外掛處理。
  • 豐富的外掛，滿足不同的需求
  • 支援自定義外掛的開發

當前工作流中引入postcss

大家可能會有這種想法，又是一種新的工具，我當前的開發框架中豈不是要大動。其實這種擔心是沒必要的。postcss是很容易引入當前的工作流中的。無論是webpack還是gulp，都有比較方便的方式。官方有詳細的介紹文件

結束語

原先很早就看到postCss，當時太年輕認為是less的一種替代品罷了，所以一直沒有去關注。瞭解之後感覺真的不錯，至於如何使用這裡就不去演示了，有興趣的可以檢視下我的簡單示例希望更多的人使用。

參考文章

davidtheclark.com/its-time-fo… julian.io/some-things…

相關文章