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

資訊專欄INFORMATION COLUMN

更便捷的css處理方式-PostCSS

AlexTuan / 1330人閱讀

摘要：本身并不直接用于處理樣式，只有配合它的插件，才能完成相關(guān)的編譯工作。是很容易引入當(dāng)前的工作流中的。無(wú)論是還是，都有比較方便的方式。

一般來(lái)說(shuō)介紹一個(gè)東西都是要從是什么，怎么用的順序來(lái)講。我感覺(jué)這樣很容易讓大家失去興趣，先看一下postcss能做點(diǎn)什么，有興趣的話再往下看，否則可能沒(méi)有耐心看下去。讓我們開(kāi)始吧

postcss能做什么 補(bǔ)全css屬性瀏覽器前綴

手寫的代碼可以是這樣的:

.div{
    display: flex;
}

postcss可以轉(zhuǎn)換之后成了這樣:

.div{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}
檢查css語(yǔ)法 
    body{
    color: #f0;
    }

會(huì)有以下提示:

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
擁抱下個(gè)版本規(guī)范的css 即css4

對(duì)于下個(gè)規(guī)范的css而言，變量，方法等功能的都會(huì)增加上去，你可以這樣來(lái)定義一個(gè)變量：

:root { 
    --red: #d33;
  }
  a { 
      color: var(--red);
  }

當(dāng)然直接在現(xiàn)有瀏覽器上是跑不通的，就正如es2015剛開(kāi)始一樣，我們需要一個(gè)轉(zhuǎn)化器來(lái)將其轉(zhuǎn)成當(dāng)前可用規(guī)范。postcss的插件就可以做到。

a{
    color:#d33
}

除了上面之外還有其他很多功能，postcss及其插件都能提供。

什么是postcss

現(xiàn)在讓我們回到最基本的問(wèn)題，postcss是什么。
援引官網(wǎng)的定義，一種使用js來(lái)轉(zhuǎn)化css的工具(A tool for transforming CSS with JavaScript)。其實(shí)我們更多的時(shí)候提到postcss是有兩個(gè)含義的：

postcss本身，也就是我們npm install時(shí)的安裝部分

基于postCss的豐富插件系統(tǒng)。
上文那些功能，都是基于postcss的插件提供的功能。

postcss本身并不直接用于處理樣式，只有配合它的插件，才能完成相關(guān)的編譯工作。

postcss不是預(yù)編譯語(yǔ)言的替代品

我想你腦海里一直在復(fù)現(xiàn)兩個(gè)名詞，less/sass，開(kāi)始的時(shí)候我也一樣，認(rèn)為postcss跟二者一樣是一種css預(yù)編譯語(yǔ)言或者起到類似作用的一種語(yǔ)言。postcss不是要取代哪一個(gè)，更多的是提供的一種補(bǔ)充，完全可以是互補(bǔ)的概念。
作為一個(gè)是使用js將css轉(zhuǎn)化為AST然后進(jìn)行處理的工具，完全不是預(yù)處理語(yǔ)言的替代品，postcss處理的必須是css文件，所以完全可以和預(yù)編譯語(yǔ)言結(jié)合，使用預(yù)編譯語(yǔ)言轉(zhuǎn)化為css之后然后進(jìn)行處理。
我一直認(rèn)為兩者不是互斥的關(guān)系，完全可以互補(bǔ)使用。

為什么需要postcss

大家可能有這么個(gè)疑問(wèn)既然兩者不互相沖突，目前我使用less/sass 也很容易滿足我的需求，為什么要使用新的東西呢。我認(rèn)為主要原因是其提供的豐富的插件功能，可以工作更加的簡(jiǎn)單化，便捷化，一句話，你只需要編寫基本的css，其他的功能交給postcss就好。做了簡(jiǎn)單的對(duì)比可能更加清晰明了。

實(shí)現(xiàn)給css屬性加上瀏覽器前綴的功能

對(duì)比一下less和postcss的實(shí)現(xiàn)：

1、 對(duì)于less而言，肯定是寫一個(gè)方法

.flex-block() {
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
}
.test{
    .flex-block()
}

2、使用postcss

.test{
    display: flex;
}

只需要編譯的時(shí)候使用autoprefixer處理就好。
可能一個(gè)屬性的效果不是特別明顯，要是有很多個(gè)屬性需要處理呢?

.flex-block() {
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
}
.transform(){
    //僅僅是舉例子
}
.ccc(){
}
.test{
    .flex-block()
    .transform()
    .ccc()
}

這時(shí)候postcss還是只需要如下:

.test{
    display: flex;
    transform:rotate(7deg);
}

這時(shí)候就能看出來(lái)postcss的便捷性了，我一直認(rèn)為可以抽象公共化的東西完全沒(méi)有必要去重復(fù)的去手動(dòng)開(kāi)發(fā)。

postcss工作原理

postcss本身是一個(gè)node模塊，可以將css文件解析為抽象語(yǔ)法樹(shù)(AST)，將該樹(shù)在多個(gè)插件方法傳遞，然后將AST轉(zhuǎn)換為字符串返回，該字符串可以輸出到目標(biāo)文件中。傳遞過(guò)程中的插件可以選擇是否改變?cè)撜Z(yǔ)法樹(shù)，上訴改變可以通過(guò)sourcemap來(lái)記錄。如下面的流程所示(借用w3cplus的一張圖)：

其實(shí)這里我們更應(yīng)該關(guān)聯(lián)起來(lái)的是babel，看一下功能：

將未來(lái)規(guī)范的轉(zhuǎn)化為當(dāng)前規(guī)范的轉(zhuǎn)義器

實(shí)現(xiàn)相同，都是將源文件解析為AST然后經(jīng)由插件處理。

豐富的插件，滿足不同的需求

支持自定義插件的開(kāi)發(fā)

當(dāng)前工作流中引入postcss

大家可能會(huì)有這種想法，又是一種新的工具，我當(dāng)前的開(kāi)發(fā)框架中豈不是要大動(dòng)。其實(shí)這種擔(dān)心是沒(méi)必要的。postcss是很容易引入當(dāng)前的工作流中的。無(wú)論是webpack還是gulp，都有比較方便的方式。官方有詳細(xì)的介紹文檔

結(jié)束語(yǔ)

原先很早就看到postCss，當(dāng)時(shí)太年輕認(rèn)為是less的一種替代品罷了，所以一直沒(méi)有去關(guān)注。了解之后感覺(jué)真的不錯(cuò)，至于如何使用這里就不去演示了，有興趣的可以查看下我的簡(jiǎn)單示例希望更多的人使用。

參考文章

http://davidtheclark.com/its-time-for-everyone-to-learn-about-postcss/
http://julian.io/some-things-you-may-think-about-postcss-and-you-might-be-wrong/

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

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

相關(guān)文章

  • 20個(gè)編寫現(xiàn)代CSS代碼的建議

    摘要：而則是專門的用于進(jìn)行布局的工具。避免重復(fù)代碼大部分元素的屬性都是從樹(shù)根部繼承而來(lái)，這也是其命名為級(jí)聯(lián)樣式表的由來(lái)。在壓縮的過(guò)程中，會(huì)將所有的空白與重復(fù)剔除掉從而減少整個(gè)文件的體積大小。 本文翻譯自Danny Markov 的20-Tips-For-Writing-Modern-CSS一文。 本文歸納于筆者的Web 前端入門與最佳實(shí)踐中CSS入門與最佳實(shí)踐系列，其他的關(guān)于CSS樣式指南的...

    Zhuxy 評(píng)論0 收藏0

  • webpack——一站到底一

    摘要：入門在逐漸成為一個(gè)成熟的青年路上，一直備受大家青睞，然而還在不斷的健身，希望以最好的姿態(tài)呈現(xiàn)給各位，如今他已經(jīng)。比起又強(qiáng)化骨骼，變得更堅(jiān)實(shí)。 webpack入門 webpack在逐漸成為一個(gè)成熟的青年路上，一直備受大家青睞， 然而還在不斷的健身，希望以最好的姿態(tài)呈現(xiàn)給各位，如今他已經(jīng)v3。 比起1 、2又強(qiáng)化骨骼，變得更堅(jiān)實(shí)。 一、什么是webpack 官方給出： Webpa...

    dack 評(píng)論0 收藏0

  • PostCSS 是個(gè)什么鬼東西？

    摘要：參考的文章最權(quán)威的初認(rèn)識(shí)一個(gè)不錯(cuò)的東西理解等插件解析技術(shù)大漠的系列文章，應(yīng)用型很強(qiáng)，推薦一個(gè)年齡差不多的開(kāi)發(fā)者的解釋一篇稍微理論化解釋的文章一個(gè)開(kāi)發(fā)模式簡(jiǎn)單的優(yōu)劣比較大家也可以直接閱讀我的博客 前言 最近大漠前輩在群里發(fā)關(guān)于PostCSS的系列文章，但是耗子姐姐又說(shuō)看了有點(diǎn)云里霧里的感覺(jué)，所以這篇文章將按一個(gè)思考的角度來(lái)理解一下 PostCSS 到底是一個(gè)什么東西。 showImg(h...

    IamDLY 評(píng)論0 收藏0

  • 談?wù)凱ostCSS

    摘要：它們有個(gè)統(tǒng)一的名字預(yù)處理器。面對(duì)以上問(wèn)題，預(yù)處理器給出了非?？尚械慕鉀Q方案變量就像其他編程語(yǔ)言一樣，免于多處修改?；氐皆掝}中，之所以會(huì)出現(xiàn)向預(yù)處理器這樣子的解決方案，歸根結(jié)底還是標(biāo)準(zhǔn)發(fā)展的滯后性導(dǎo)致的。 前言 現(xiàn)在的前端，javascript的發(fā)展有目共睹，框架林立。同時(shí)，html也是齊頭并進(jìn)，推出了HTML5標(biāo)準(zhǔn)，并且得到了普及。這樣的發(fā)展卻唯獨(dú)少了一個(gè)角色？ CSS，就是這個(gè)看似不...

    高勝山 評(píng)論0 收藏0

  • 談?wù)凱ostCSS

    摘要：它們有個(gè)統(tǒng)一的名字預(yù)處理器。面對(duì)以上問(wèn)題，預(yù)處理器給出了非?？尚械慕鉀Q方案變量就像其他編程語(yǔ)言一樣，免于多處修改。回到話題中，之所以會(huì)出現(xiàn)向預(yù)處理器這樣子的解決方案，歸根結(jié)底還是標(biāo)準(zhǔn)發(fā)展的滯后性導(dǎo)致的。 前言 現(xiàn)在的前端，javascript的發(fā)展有目共睹，框架林立。同時(shí)，html也是齊頭并進(jìn)，推出了HTML5標(biāo)準(zhǔn)，并且得到了普及。這樣的發(fā)展卻唯獨(dú)少了一個(gè)角色？ CSS，就是這個(gè)看似不...

    leap_frog 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

閱讀需要支付1元查看
<