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