什么是postcss

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

1 . 使用下一代css語法

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

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

4 . css 代碼壓縮等等

postcss 只是一個(gè)工具，本身不會對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ǔ)全，全自動的，無需多說

安裝：

cnpm install Autoprefixer --save-dev

2 . postcss-cssnext

使用下個(gè)版本的css語法【關(guān)于語法另一篇文章會單獨(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檢測區(qū)分大小寫，也就是說Px/PX/pX不會被轉(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

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

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

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

么是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會自動幫你添加瀏覽器前綴哦。

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

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

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

cssnext

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

posts-px2rem

使用移動適配問題的插件

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)目了。

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

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

ostCSS是一個(gè)非常通用的工具，它可以通過javascript插件轉(zhuǎn)換CSS樣式。它的靈活性在于它的建造方式。

PostCSS的核心部分是一個(gè)node.js模塊，您可以使用NPM進(jìn)行安裝，它有一個(gè)由200多個(gè)插件組成的生態(tài)系統(tǒng)，您可以在項(xiàng)目中選擇使用這些插件。

PostCSS既不是預(yù)處理器，也不是后處理器，因?yàn)椴煌腜ostCSS插件可能屬于這兩類中的任何一類，或者同時(shí)屬于這兩類；它完全取決于您對它的理解。使用PostCSS，您不需要學(xué)習(xí)不同的語法，比如sass或Less；您可以立即開始使用它。

PostCSS獲取現(xiàn)有的css文件并將其轉(zhuǎn)換為javascript可讀數(shù)據(jù)，然后javascript插件執(zhí)行修改，postss返回原始文件的修改版本。聽起來很酷，不是嗎？

在這篇文章中，我們將查看6個(gè)Postcss插件，讓您了解使用這個(gè)出色的工具可以實(shí)現(xiàn)的一些偉大的事情。

Autoprefixer

autoprefixer可能是最知名的postcss插件，因?yàn)樗还雀琛witter和Shopify等知名科技公司使用。它在必要的地方向CSS規(guī)則添加供應(yīng)商前綴。

autoprefixer使用我可以使用的數(shù)據(jù)。這樣它就不會過時(shí)，而且可以應(yīng)用最新的規(guī)則。您可以在它的交互式演示站點(diǎn)上查看它的工作原理。

CSSnext

cssnext是一個(gè)CSS發(fā)起者，它允許您在當(dāng)前站點(diǎn)上使用未來的CSS語法。W3C有許多新的CSS規(guī)則，這些規(guī)則目前沒有被瀏覽器實(shí)現(xiàn)，但可以使開發(fā)人員更快、更容易地編寫更復(fù)雜的CSS。cssnext是用來彌補(bǔ)這個(gè)缺口的。

值得一看它的特性，看看你能用它完成什么，例如你可以在你的設(shè)計(jì)中使用自定義媒體查詢、自定義選擇器、顏色修改器、SVG過濾器和新的偽類。

PreCSS

PreCSS是一個(gè)postcss插件，工作方式類似于css預(yù)處理器。它可以利用樣式文件中的標(biāo)記之類的SASS。

通過在工作流中引入PreCSS，您可以在CSS代碼中使用變量if else語句、for循環(huán)、mixin、@extend和@import規(guī)則、嵌套和許多其他方便的功能。PreCSS的Github文檔為您提供了如何充分利用它的詳細(xì)說明。

StyleLint

StyleLint是一個(gè)現(xiàn)代的CSS Linter，它可以校對和驗(yàn)證您的CSS代碼。它使避免錯(cuò)誤變得容易，并促使您遵循一致的編碼約定。

Stylelint了解最新的CSS語法，因此它可以與前面提到的precss插件一起使用。它還允許您進(jìn)行自己的配置，甚至檢查設(shè)置是否有效。

PostCSS Assets

PostssAssets插件是一個(gè)方便的CSS文件資源管理器。如果您在URL路徑方面遇到問題，這是一個(gè)很好的選擇，因?yàn)镻ostSS資產(chǎn)將樣式表文件與環(huán)境變化隔離開來。

您需要定義加載路徑、相對路徑和基本路徑，插件將自動查找您需要的資源。例如，如果需要foobar.jpg圖像的正確URL，可以編寫以下代碼：

body {
 background: resolve('foobar.jpg');
}

Postcss Assets還負(fù)責(zé)節(jié)省緩存，因?yàn)槿绻Ｍ谛薷馁Y產(chǎn)時(shí)自動更改URL路徑，可以將cachebuster變量設(shè)置為true。這個(gè)智能插件還可以計(jì)算圖像文件的尺寸（寬度和高度），甚至可以使用預(yù)設(shè)比例調(diào)整它們的大小

CSSNano

如果您需要一個(gè)生產(chǎn)站點(diǎn)的優(yōu)化和縮小的CSS文件，那么有必要查看cssnano。它是一個(gè)模塊化的插件，由許多較小的單一責(zé)任PostSS插件組成。它不僅執(zhí)行基本的縮小技術(shù)，如刪除空白，還具有高級選項(xiàng)，使集中優(yōu)化成為可能。

除了許多其他功能外，cssnano還能夠重新調(diào)整z-index值、減少自定義標(biāo)識符、轉(zhuǎn)換長度、時(shí)間和顏色值以及刪除過時(shí)的供應(yīng)商前綴。

在線咨詢

上一篇：網(wǎng)頁頂部導(dǎo)航欄設(shè)計(jì)總結(jié)
下一篇：HTML5 Canvas逼真水波紋動畫特效

您的項(xiàng)目需求

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

整合營銷服務(wù)商