成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

開發(fā)一個psotcss插件

李昌杰 / 3518人閱讀

摘要：另一個是，返回結(jié)果對象，譬如，獲得處理結(jié)果的字符串，包含組件里創(chuàng)建的和自定義信息，創(chuàng)造一個實(shí)例并將其加入到中，獲得所有創(chuàng)建過的。寫在最后想寫一下的可以按照這里的指引，很詳細(xì)這是我寫的一個將轉(zhuǎn)為的插件參考

git地址：開發(fā)一個psotcss插件

節(jié)點(diǎn)類型

postcss會將我們的css生成ast，然后會去遍歷它，在遍歷的過程中會傳給我們一些不同類型的節(jié)點(diǎn)對象，我們主要需要了解的幾個類型：

css ast主要有3種父類型

AtRule: @xxx的這種類型，如@screen

Comment: 注釋

Rule: 普通的css規(guī)則

還有幾個個比較重要的子類型：

decl： 指的是每條具體的css規(guī)則

rule：作用于某個選擇器上的css規(guī)則集合

這是test的地方的，不熟悉ast的可以先了解一下:css ast結(jié)構(gòu)

postCss操作方法

postCss為我們提供了一些方便的操作方法
遍歷

walk: 遍歷所有節(jié)點(diǎn)信息，無論是atRule、rule、comment的父類型，還是rule、 decl的子類型

walkAtRules：遍歷所有的atRule

walkComments：遍歷所有的注釋節(jié)點(diǎn)

walkDecls：遍歷所以的屬性

walkRules：遍歷所有的css代碼塊

root.walkDecls(decl => {
    decl.prop = decl.prop.split("").reverse().join("");
});

postcss在遍歷的過程中，會將當(dāng)前遍歷的對象的cell傳給回調(diào)函數(shù)，該參數(shù)是對應(yīng)的rule，decl或者comment等Constructor等構(gòu)造函數(shù)的實(shí)例，根據(jù)遍歷的節(jié)點(diǎn)不同，該實(shí)例可能會有如下屬性：

nodes: css規(guī)則的節(jié)點(diǎn)信息集合

decl: 每條css規(guī)則的節(jié)點(diǎn)信息

prop: 樣式名，如width

value: 樣式值， 如10px

type: 類型

source: 包括start和end的位置信息，start和end里都有l(wèi)ine和* column表示行和列

selector: type為rule時的選擇器

name: type為atRule時@緊接rule名，譬如@import "xxx.css"中的import

params: type為atRule時@緊接rule名后的值，譬如@import "xxx.css"中的xxx.css

text: type為comment時的注釋內(nèi)容

同樣還有繼承的一些方法，給我操作css的， 比如操作每條具體css屬性的declaration：

after
before
cleanRaws
clone
cloneAfter
cloneBefore
error
next
prev
raw
remove
replaceWith
root
toString
warn
postcss plugin

postcss插件如同babel插件一樣，有固定的格式

export default postcss.plugin("postcss-plugin-name", function (opts) {
  opts = opts || {};
  return function (root, result) {
    // 處理邏輯
  };
});

注冊個插件名，并獲取插件配置參數(shù)opts

返回值是個函數(shù)，這個函數(shù)主體是你的處理邏輯，有2個參數(shù)，一個是root，css ast的根節(jié)點(diǎn)。另一個是result，返回結(jié)果對象，譬如result.css，獲得處理結(jié)果的css字符串，result.message包含組件里創(chuàng)建的warnings和自定義信息，result.warn()創(chuàng)造一個warning實(shí)例并將其加入到result.message中，result.warnings()獲得所有創(chuàng)建過的warning。

注意組件的異常信息處理，不要直接console，因?yàn)橐恍?postcss 處理器會過濾掉console的輸出導(dǎo)致異常信息丟失，用node.warn或者node.error創(chuàng)造CssSyntaxError 實(shí)例，會自動帶上源碼中的位置信息幫助debug，加到異常信息隊(duì)列里。

直接調(diào)用postcss下的方法

可以用postcss.parse來處理一段css文本，拿到css ast，然后進(jìn)行處理，再通過調(diào)用toResult().css拿到處理后的css輸出，在一些簡單的處理中可以用這種方法。

寫在最后：

想寫一下的可以按照這里的指引，很詳細(xì)https://github.com/postcss/postcss-plugin-boilerplate

這是我寫的一個將px轉(zhuǎn)為vw的插件vw-by-px

參考：

http://api.postcss.org

postcss-pixel-to-viewport

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

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/117545.html

相關(guān)文章

  • CSSModules

    摘要：支持不同的構(gòu)建工具，這里我使用的是下文都是以為例。全局作用域允許用的語法聲明一個全局的作用域。使用普通的寫法，就會引用全局的的樣式我是結(jié)果的顯示黑色。的組合在里，一個選擇器可以繼承另一個選擇器。 showImg(https://segmentfault.com/img/bV7OHk?w=1050&h=360); 這篇文章來一起了解 css 模塊化的用法和原理 ，dome 地址：css ...

    Youngdze 評論0 收藏0

  • TinyMCE插件開發(fā)

    摘要：目前網(wǎng)上關(guān)于插件開發(fā)的文章少得可憐，下面分享最近的經(jīng)歷，如何快速上手開發(fā)一個插件。第六步調(diào)試插件在打開的網(wǎng)頁中可以看到工具欄中實(shí)現(xiàn)了插件。 TinyMCE是一個非常優(yōu)秀的輕量級的所見即所得HTML編輯器，歷史悠久，開源，在github的start也非常高的，且長期保持更新。TinyMCE的官方插件不少，基本能滿足日常需求，但是有時候我們還需要一些結(jié)合業(yè)務(wù)的功能。這時官方插件無法滿足，就...

    aboutU 評論0 收藏0

  • 如何開發(fā)一個 PyCharm 插件

    摘要：今天我們說說怎么搭建環(huán)境自己寫一個插件。插件工程目錄結(jié)構(gòu)一個典型的插件目錄結(jié)構(gòu)就像下圖。如果成功那么在工程目錄就會生成一個同名的文件。 PyCharm 是很多 Python 開發(fā)者優(yōu)先選擇的 IDE，功能強(qiáng)大，跨平臺，提供免費(fèi)社區(qū)版，非常良心。如果你想自己給PyCharm添加一些功能怎么辦呢？有兩個辦法： 通過提需求實(shí)現(xiàn)，到 JetBrains 的 github 去提issue或者自...

    LdhAndroid 評論0 收藏0

  • 插件分享大會[不定期更新]

    摘要：最近老是在重裝系統(tǒng)，每次重裝就要重新配置環(huán)境，安裝軟件，安裝插件。因?yàn)榛局挥羞@個插件，才可以設(shè)置一個文件夾下三個項(xiàng)目能分別傳到不同的服務(wù)器中。在全球最大的同性交友網(wǎng)站中，只要鼠標(biāo)懸停到一個項(xiàng)目上時，就會在一個彈窗顯示該項(xiàng)目的信息。 最近老是在重裝系統(tǒng)，每次重裝就要重新配置環(huán)境，安裝軟件，安裝插件。每次重裝的時候，都不知道自己以前到底用過什么軟件插件。所以，還是寫一篇文章記錄下來，順便...

    CastlePeaK 評論0 收藏0

  • 插件分享大會[不定期更新]

    摘要：最近老是在重裝系統(tǒng)，每次重裝就要重新配置環(huán)境，安裝軟件，安裝插件。因?yàn)榛局挥羞@個插件，才可以設(shè)置一個文件夾下三個項(xiàng)目能分別傳到不同的服務(wù)器中。在全球最大的同性交友網(wǎng)站中，只要鼠標(biāo)懸停到一個項(xiàng)目上時，就會在一個彈窗顯示該項(xiàng)目的信息。 最近老是在重裝系統(tǒng)，每次重裝就要重新配置環(huán)境，安裝軟件，安裝插件。每次重裝的時候，都不知道自己以前到底用過什么軟件插件。所以，還是寫一篇文章記錄下來，順便...

    darkbug 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<