摘要:本身并不直接用于處理樣式,只有配合它的插件,才能完成相關(guān)的編譯工作。是很容易引入當(dāng)前的工作流中的。無論是還是,都有比較方便的方式。
一般來說介紹一個東西都是要從是什么,怎么用的順序來講。我感覺這樣很容易讓大家失去興趣,先看一下postcss能做點(diǎn)什么,有興趣的話再往下看,否則可能沒有耐心看下去。讓我們開始吧
postcss能做什么 補(bǔ)全css屬性瀏覽器前綴手寫的代碼可以是這樣的:
.div{ display: flex; }
postcss可以轉(zhuǎn)換之后成了這樣:
.div{ display: -webkit-box; display: -ms-flexbox; display: flex; }檢查css語法
body{ color: #f0; }
會有以下提示:
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擁抱下個版本規(guī)范的css 即css4
對于下個規(guī)范的css而言,變量,方法等功能的都會增加上去,你可以這樣來定義一個變量:
:root { --red: #d33; } a { color: var(--red); }
當(dāng)然直接在現(xiàn)有瀏覽器上是跑不通的,就正如es2015剛開始一樣,我們需要一個轉(zhuǎn)化器來將其轉(zhuǎn)成當(dāng)前可用規(guī)范。postcss的插件就可以做到。
a{ color:#d33 }
除了上面之外還有其他很多功能,postcss及其插件都能提供。
什么是postcss現(xiàn)在讓我們回到最基本的問題,postcss是什么。
援引官網(wǎng)的定義,一種使用js來轉(zhuǎn)化css的工具(A tool for transforming CSS with JavaScript)。其實(shí)我們更多的時候提到postcss是有兩個含義的:
postcss本身,也就是我們npm install時的安裝部分
基于postCss的豐富插件系統(tǒng)。
上文那些功能,都是基于postcss的插件提供的功能。
postcss本身并不直接用于處理樣式,只有配合它的插件,才能完成相關(guān)的編譯工作。
postcss不是預(yù)編譯語言的替代品我想你腦海里一直在復(fù)現(xiàn)兩個名詞,less/sass,開始的時候我也一樣,認(rèn)為postcss跟二者一樣是一種css預(yù)編譯語言或者起到類似作用的一種語言。postcss不是要取代哪一個,更多的是提供的一種補(bǔ)充,完全可以是互補(bǔ)的概念。
作為一個是使用js將css轉(zhuǎn)化為AST然后進(jìn)行處理的工具,完全不是預(yù)處理語言的替代品,postcss處理的必須是css文件,所以完全可以和預(yù)編譯語言結(jié)合,使用預(yù)編譯語言轉(zhuǎn)化為css之后然后進(jìn)行處理。
我一直認(rèn)為兩者不是互斥的關(guān)系,完全可以互補(bǔ)使用。
大家可能有這么個疑問既然兩者不互相沖突,目前我使用less/sass 也很容易滿足我的需求,為什么要使用新的東西呢。我認(rèn)為主要原因是其提供的豐富的插件功能,可以工作更加的簡單化,便捷化,一句話,你只需要編寫基本的css,其他的功能交給postcss就好。做了簡單的對比可能更加清晰明了。
實(shí)現(xiàn)給css屬性加上瀏覽器前綴的功能對比一下less和postcss的實(shí)現(xiàn):
1、 對于less而言,肯定是寫一個方法
.flex-block() { display: -ms-flexbox; display: -webkit-flex; display: flex; } .test{ .flex-block() }
2、使用postcss
.test{ display: flex; }
只需要編譯的時候使用autoprefixer處理就好。
可能一個屬性的效果不是特別明顯,要是有很多個屬性需要處理呢?
.flex-block() { display: -ms-flexbox; display: -webkit-flex; display: flex; } .transform(){ //僅僅是舉例子 } .ccc(){ } .test{ .flex-block() .transform() .ccc() }
這時候postcss還是只需要如下:
.test{ display: flex; transform:rotate(7deg); }
這時候就能看出來postcss的便捷性了,我一直認(rèn)為可以抽象公共化的東西完全沒有必要去重復(fù)的去手動開發(fā)。
postcss工作原理postcss本身是一個node模塊,可以將css文件解析為抽象語法樹(AST),將該樹在多個插件方法傳遞,然后將AST轉(zhuǎn)換為字符串返回,該字符串可以輸出到目標(biāo)文件中。傳遞過程中的插件可以選擇是否改變該語法樹,上訴改變可以通過sourcemap來記錄。如下面的流程所示(借用w3cplus的一張圖):
其實(shí)這里我們更應(yīng)該關(guān)聯(lián)起來的是babel,看一下功能:
將未來規(guī)范的轉(zhuǎn)化為當(dāng)前規(guī)范的轉(zhuǎn)義器
實(shí)現(xiàn)相同,都是將源文件解析為AST然后經(jīng)由插件處理。
豐富的插件,滿足不同的需求
支持自定義插件的開發(fā)
當(dāng)前工作流中引入postcss大家可能會有這種想法,又是一種新的工具,我當(dāng)前的開發(fā)框架中豈不是要大動。其實(shí)這種擔(dān)心是沒必要的。postcss是很容易引入當(dāng)前的工作流中的。無論是webpack還是gulp,都有比較方便的方式。官方有詳細(xì)的介紹文檔
結(jié)束語原先很早就看到postCss,當(dāng)時太年輕認(rèn)為是less的一種替代品罷了,所以一直沒有去關(guā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)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址:http://specialneedsforspecialkids.com/yun/112926.html
摘要:而則是專門的用于進(jìn)行布局的工具。避免重復(fù)代碼大部分元素的屬性都是從樹根部繼承而來,這也是其命名為級聯(lián)樣式表的由來。在壓縮的過程中,會將所有的空白與重復(fù)剔除掉從而減少整個文件的體積大小。 本文翻譯自Danny Markov 的20-Tips-For-Writing-Modern-CSS一文。 本文歸納于筆者的Web 前端入門與最佳實(shí)踐中CSS入門與最佳實(shí)踐系列,其他的關(guān)于CSS樣式指南的...
摘要:入門在逐漸成為一個成熟的青年路上,一直備受大家青睞,然而還在不斷的健身,希望以最好的姿態(tài)呈現(xiàn)給各位,如今他已經(jīng)。比起又強(qiáng)化骨骼,變得更堅(jiān)實(shí)。 webpack入門 webpack在逐漸成為一個成熟的青年路上,一直備受大家青睞, 然而還在不斷的健身,希望以最好的姿態(tài)呈現(xiàn)給各位,如今他已經(jīng)v3。 比起1 、2又強(qiáng)化骨骼,變得更堅(jiān)實(shí)。 一、什么是webpack 官方給出: Webpa...
摘要:參考的文章最權(quán)威的初認(rèn)識一個不錯的東西理解等插件解析技術(shù)大漠的系列文章,應(yīng)用型很強(qiáng),推薦一個年齡差不多的開發(fā)者的解釋一篇稍微理論化解釋的文章一個開發(fā)模式簡單的優(yōu)劣比較大家也可以直接閱讀我的博客 前言 最近大漠前輩在群里發(fā)關(guān)于PostCSS的系列文章,但是耗子姐姐又說看了有點(diǎn)云里霧里的感覺,所以這篇文章將按一個思考的角度來理解一下 PostCSS 到底是一個什么東西。 showImg(h...
摘要:它們有個統(tǒng)一的名字預(yù)處理器。面對以上問題,預(yù)處理器給出了非常可行的解決方案變量就像其他編程語言一樣,免于多處修改。回到話題中,之所以會出現(xiàn)向預(yù)處理器這樣子的解決方案,歸根結(jié)底還是標(biāo)準(zhǔn)發(fā)展的滯后性導(dǎo)致的。 前言 現(xiàn)在的前端,javascript的發(fā)展有目共睹,框架林立。同時,html也是齊頭并進(jìn),推出了HTML5標(biāo)準(zhǔn),并且得到了普及。這樣的發(fā)展卻唯獨(dú)少了一個角色? CSS,就是這個看似不...
摘要:它們有個統(tǒng)一的名字預(yù)處理器。面對以上問題,預(yù)處理器給出了非常可行的解決方案變量就像其他編程語言一樣,免于多處修改。回到話題中,之所以會出現(xiàn)向預(yù)處理器這樣子的解決方案,歸根結(jié)底還是標(biāo)準(zhǔn)發(fā)展的滯后性導(dǎo)致的。 前言 現(xiàn)在的前端,javascript的發(fā)展有目共睹,框架林立。同時,html也是齊頭并進(jìn),推出了HTML5標(biāo)準(zhǔn),并且得到了普及。這樣的發(fā)展卻唯獨(dú)少了一個角色? CSS,就是這個看似不...
閱讀 1818·2021-11-18 13:21
閱讀 1953·2021-10-18 13:30
閱讀 1539·2021-10-12 10:13
閱讀 906·2021-10-09 09:43
閱讀 5413·2021-09-22 15:13
閱讀 3583·2021-08-11 10:22
閱讀 936·2019-08-30 13:46
閱讀 3520·2019-08-30 13:21