国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

PostCSS原理解析

changfeng1050 / 3371人閱讀

摘要：寫在前面的話前端工程化日益成熟今天，我們對于工具越來越深的封裝。結(jié)語更多的是提供平臺(tái)能力，賦能的處理。

寫在前面的話

前端工程化日益成熟今天，我們對于工具越來越深的封裝。不管是從vue-cli的3.0版本起，還是umi、bigfish 等前端腳手架，對于webpack都封裝在內(nèi)，對于工程化無疑是高效的，但也在一定程度上讓新手們者失去了從零配置一個(gè)項(xiàng)目的機(jī)會(huì)，所以很多時(shí)候還是希望能透過大神們的框架，研究一下底層結(jié)構(gòu)。

簡介

PostCSS是一個(gè)通過JS插件轉(zhuǎn)換樣式表的工具，它本身并不是一門新的CSS語言，而是一個(gè)平臺(tái)或者是生態(tài)心態(tài)，提供插件擴(kuò)展服務(wù)即JS API，開發(fā)者可以根據(jù)這些接口，定制開發(fā)插件，目前比較流行的插件工具如：Autoprefixer 、Stylelint 、CSSnano。

工作流

大致步驟：

將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: ""},
                   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。

結(jié)語

PostCSS更多的是提供平臺(tái)能力，賦能js的處理。

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/101018.html

相關(guān)文章

  • 從0到1：PostCSS 插件開發(fā)最佳實(shí)踐

    摘要：單元測試秉承測試驅(qū)動(dòng)開發(fā)的開發(fā)理念，單元測試的任務(wù)是必不可少的。維護(hù)一份按照建議，也將更新歷史等數(shù)據(jù)放在了一個(gè)名為文件上，并采用語義化的版本號(hào)。 本文原始來源：http://devework.com/postcss-p...。轉(zhuǎn)載請?zhí)峁┰紒碓?，謝謝！ showImg(https://segmentfault.com/img/bVHtqu?w=2028&h=612); 前陣子為了滿足工...

    nidaye 評論0 收藏0

  • VSCode下讓CSS文件完美支持SCSS或SASS語法方法

    摘要：下讓文件完美支持或語法方法習(xí)慣后通常都是直接對文件進(jìn)行處理但是大部分習(xí)慣的朋友也許不適應(yīng)了我專門研究了一下在編輯器下如果配置相關(guān)代碼和設(shè)置達(dá)到文件完美編寫的辦法其他語法類型原理相似這里以為例開始配置編輯器設(shè)置的配置首先配置編輯器的設(shè)置按快捷 VSCode下讓CSS文件完美支持SCSS或SASS語法方法 習(xí)慣Webpack + PostCSS后, 通常PostCSS都是直接對CSS文件進(jìn)...

    superPershing 評論0 收藏0

  • 更便捷的css處理方式-PostCSS

    摘要：本身并不直接用于處理樣式，只有配合它的插件，才能完成相關(guān)的編譯工作。是很容易引入當(dāng)前的工作流中的。無論是還是，都有比較方便的方式。 一般來說介紹一個(gè)東西都是要從是什么，怎么用的順序來講。我感覺這樣很容易讓大家失去興趣，先看一下postcss能做點(diǎn)什么，有興趣的話再往下看，否則可能沒有耐心看下去。讓我們開始吧 postcss能做什么 補(bǔ)全css屬性瀏覽器前綴 手寫的代碼可以是這樣的: ....

    AlexTuan 評論0 收藏0

  • 在 CSS 預(yù)編譯器之后：PostCSS

    摘要：提到預(yù)編譯器，你可能想到以及。而本文要介紹的，正是一個(gè)這樣的工具預(yù)編譯器可以做到的事，它同樣可以做到。所以，預(yù)編譯器過時(shí)了嗎當(dāng)然不會(huì)。等預(yù)編譯器的特點(diǎn)是成熟可靠。此外，預(yù)編譯器和可以協(xié)同使用。 提到css預(yù)編譯器（css preprocessor），你可能想到Sass[]以及[Stylus][]。而本文要介紹的PostCSS，正是一個(gè)這樣的工具：css預(yù)編譯器可以做到的事，它同樣可以做...

    NeverSayNever 評論0 收藏0

  • 前端面試之路一(HTML+CSS面試整理)

    摘要：或表示紅色，表示綠色，表示藍(lán)色，也可取其他數(shù)值來指定顏色。針對多字節(jié)文字，中文句子也是單詞允許在單詞內(nèi)換行。 一、HTML基礎(chǔ) html常見元素和理解 html常見元素分類 head區(qū)元素：（不會(huì)在頁面上留下直接內(nèi)容） meta title style link script base body區(qū)： div/selection/article/aside/header/f...

    hqman 評論0 收藏0

發(fā)表評論

0條評論

最新活動(dòng)
閱讀需要支付1元查看
<