神奇的css工具postcss

么是postcss?

官網(wǎng)介紹PostCss是一個(gè)允許使用JS插件轉(zhuǎn)換樣式的工具。這些插件可以檢查（lint）你的CSS，支持CSS Variables和Mixins，編譯尚未被瀏覽器廣泛支持的先進(jìn)的CSS語法，內(nèi)聯(lián)圖片，以及其它很多優(yōu)秀的功能。

那么它到底是什么呢。

我們先來介紹一下它最出名的最實(shí)用的插件 autoprefixer

autoprefixer是一個(gè)讓你偷懶的神器。如果你的項(xiàng)目是PC端，并且產(chǎn)品大大或者項(xiàng)目大大要求你兼容低版本IE，各種瀏覽器，是不是很頭疼。別擔(dān)心，用了autoprefixer，寫正常的標(biāo)準(zhǔn)css就可以了，autoprefixer會(huì)自動(dòng)幫你添加瀏覽器前綴哦。

這樣寫是不是很省事，很神奇。

除了這個(gè)用處外，國內(nèi)外大佬們?yōu)樗鼘懥朔浅６嗟牟寮?/p>

這里為大家提供幾個(gè)插件。

cssnext

cssnext能夠讓你使用下一代css語法，如目前css4還沒有各瀏覽器支持，但是可以使用cssnext來把css4的語法翻譯成css3

posts-px2rem

使用移動(dòng)適配問題的插件

posts-partial-import

讓你的css文件支持@import

precss

這是一個(gè)大雜燴，主要是為了滿足SASS開發(fā)者的習(xí)慣，繼承了很多插件。

postcss-mixins 一個(gè)和SASS的mixins用法相同的插件

postcss-atroot 讓你的嵌套css處于根部

posts-extend 有相同結(jié)構(gòu)卻有那么一點(diǎn)點(diǎn)的區(qū)別，用這個(gè)可以方便同意管理相同部分樣式代碼

postcss是如何使用得

這里簡單展示一下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

這樣我們就配置完成了個(gè)簡單的postcss得項(xiàng)目了。

之后我會(huì)更加深入了解一下postcss其它插件得使用，會(huì)在以后為大家詳解。

希望大家喜歡，可以多多關(guān)注一下我。

ostcss越來越重要了，經(jīng)常可以看到它的身影，比如面試，論壇。本篇文章是小編參考多方資料以及官網(wǎng)總結(jié)出來的，不喜勿噴，喜歡多多支持，謝謝！
另外 React Redux ES6 Webpack...... 更多干貨在個(gè)人主頁中查看

什么是postcss

postcss 一種對(duì)css編譯的工具，類似babel對(duì)js的處理，常見的功能如：

1 . 使用下一代css語法

2 . 自動(dòng)補(bǔ)全瀏覽器前綴

3 . 自動(dòng)把px代為轉(zhuǎn)換成rem（rem不熟悉的，點(diǎn)這）

4 . css 代碼壓縮等等

postcss 只是一個(gè)工具，本身不會(huì)對(duì)css一頓操作，它通過插件實(shí)現(xiàn)功能，autoprefixer 就是其一。

與 less sass 的區(qū)別

less sass 是預(yù)處理器，用來支持?jǐn)U充css語法。

postcss 既不是預(yù)處理器也不是后處理器，其功能比較廣泛，而且重要的一點(diǎn)是，postcss可以和less/sass結(jié)合使用

關(guān)于取舍

雖然可以結(jié)合less/sass使用，但是它們還是有很多重復(fù)功能，用其中一個(gè)基本就 ok 了。

以下是個(gè)人的總結(jié)：

postcss 鼓勵(lì)開發(fā)者使用規(guī)范的CSS原生語法編寫源代碼，支持未來的css語法，就像babel支持ES6。
less、sass 擴(kuò)展了原生的東西，它把css作為一個(gè)子集，但這不好保持向后兼容。

總體來說區(qū)別不大，看個(gè)人喜好吧

如何使用

這里只說在webpack里集成使用，首先需要 loader

1 . 安裝

npm install postcss-loader –save-dev

2 . webpack配置

一般與其他loader配合使用，下面*標(biāo)部分才是postcss用到的

配合時(shí)注意loader的順序（從下面開始加載）

3 . postcss配置

項(xiàng)目根目錄新建 postcss.config.js文件，里面配置一些插件

注：也可以在webpack中配置

常用的postcss插件

1 . Autoprefixer

前綴補(bǔ)全，全自動(dòng)的，無需多說

安裝：

cnpm install Autoprefixer --save-dev

2 . postcss-cssnext

使用下個(gè)版本的css語法【關(guān)于語法另一篇文章會(huì)單獨(dú)講】

安裝：

cnpm install postcss-cssnext --save-dev

3 . postcss-pxtorem

把px轉(zhuǎn)換成rem

安裝：

cnpm install postcss-pxtorem --save-dev

配置項(xiàng)：

特殊技巧:不轉(zhuǎn)換成rem

px檢測(cè)區(qū)分大小寫，也就是說Px/PX/pX不會(huì)被轉(zhuǎn)換，可以用這個(gè)方式避免轉(zhuǎn)換成rem

下篇：cssnext，下一代css

【關(guān)注一下不迷路】

html css html css javascript html javascript css javascript css

ostcss 一種對(duì)css編譯的工具，類似babel對(duì)js的處理，常見的功能如：

1 . 使用下一代css語法

2 . 自動(dòng)補(bǔ)全瀏覽器前綴

3 . 自動(dòng)把px代為轉(zhuǎn)換成rem

4 . css 代碼壓縮等等

postcss 只是一個(gè)工具，本身不會(huì)對(duì)css一頓操作，它通過插件實(shí)現(xiàn)功能，autoprefixer 就是其一。

與 less sass 的區(qū)別

less sass 是預(yù)處理器，用來支持?jǐn)U充css語法。

postcss 既不是預(yù)處理器也不是后處理器，其功能比較廣泛，而且重要的一點(diǎn)是，postcss可以和less/sass結(jié)合使用

如何使用

這里只說在webpack里集成使用，首先需要 loader

1 . 安裝

npm install postcss-loader –save-dev

2 . webpack配置

一般與其他loader配合使用，下面*標(biāo)部分才是postcss用到的

配合時(shí)注意loader的順序（從下面開始加載）

3 . postcss配置

項(xiàng)目根目錄新建 postcss.config.js文件，里面配置一些插件

注：也可以在webpack中配置

常用的postcss插件

1 . Autoprefixer

前綴補(bǔ)全，全自動(dòng)的，無需多說

安裝：

cnpm install Autoprefixer --save-dev

2 . postcss-cssnext

使用下個(gè)版本的css語法【關(guān)于語法另一篇文章會(huì)單獨(dú)講】

安裝：

cnpm install postcss-cssnext --save-dev

3 . postcss-pxtorem

把px轉(zhuǎn)換成rem

安裝：

cnpm install postcss-pxtorem --save-dev

配置項(xiàng)：

特殊技巧:不轉(zhuǎn)換成rem

px檢測(cè)區(qū)分大小寫，也就是說Px/PX/pX不會(huì)被轉(zhuǎn)換，可以用這個(gè)方式避免轉(zhuǎn)換成rem

原理

工作流

大致步驟：

將CSS解析成抽象語法樹(AST樹)
將AST樹”傳遞”給任意數(shù)量的插件處理
將處理完畢的AST樹重新轉(zhuǎn)換成字符串

在PostCSS中有幾個(gè)關(guān)鍵的處理機(jī)制：

Source string → Tokenizer → Parser → AST → Processor → Stringifier

Tokenizer

將源css字符串進(jìn)行分詞

舉個(gè)例子：

.className { color: #FFF; }

通過Tokenizer后結(jié)果如下：

[
    ["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類型為例，參數(shù)如下：

const token = [
     // token 的類型，如word、space、comment
    'word',

    // 匹配到的詞名稱
    '.className',

    // 代表該詞開始位置的row以及column，但像 type為`space`的屬性沒有該值
    1, 1,

    // 代表該詞結(jié)束位置的row以及column，
    1, 10
]

Parser

經(jīng)過Tokenizer之后，需要Parser將結(jié)果初始化為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 // 子元素
}

Processor

經(jīng)過AST之后，PostCSS提供了大量JS API給插件用

Stringifier

插件處理后，比如加瀏覽器前綴，會(huì)被重新Stringifier.stringify為一般CSS。

參考：
https://segmentfault.com/a/1190000017886402
https://www.jianshu.com/p/288963680642

作者：指尖跳動(dòng)
鏈接：https://www.jianshu.com/p/9a9048bc8978
來源：簡書
著作權(quán)歸作者所有。商業(yè)轉(zhuǎn)載請(qǐng)聯(lián)系作者獲得授權(quán)，非商業(yè)轉(zhuǎn)載請(qǐng)注明出處。

在線咨詢

上一篇：JavaScript實(shí)現(xiàn)頁面到滾動(dòng)到指定位置執(zhí)行某些操作
下一篇：HTML+CSS 常用的網(wǎng)頁布局

您的項(xiàng)目需求

*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。

整合營銷服務(wù)商

神奇的css工具postcss

么是postcss?

那么它到底是什么呢。

postcss是如何使用得

什么是postcss

與 less sass 的區(qū)別

關(guān)于取舍

如何使用

常用的postcss插件

與 less sass 的區(qū)別

如何使用

常用的postcss插件

原理

工作流

Tokenizer

Parser

Processor

Stringifier

您的項(xiàng)目需求