2019-04-25
原理
用JS來處理CSS
每個 PostCSS 插件都是一個 NodeJS 的模塊
現(xiàn)在有200多個插件倚聚，但還不夠用
主要功能
就兩個
1）把 CSS 解析成 JavaScript 可以操作的 AST枷踏；
2）調(diào)用插件 處理 AST，得到結(jié)果
可以支持變量和混入（mixin）状囱，增加瀏覽器相關的聲明前綴术裸，或是把使用將來的 CSS 規(guī)范的樣式規(guī)則轉(zhuǎn)譯（transpile）成當前的 CSS 規(guī)范支持的格式
常用的PostCSS插件
Autoprefixer
#content {
display: flex;
}
變?yōu)椋?/p>
#content {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
}
cssnext
允許開發(fā)者在當前項目中使用將來CSS版本的新特性（就像將ES6/7/8 轉(zhuǎn)為 ES5）
自定義屬性和變量
可以寫變量
樣式規(guī)則嵌套
.message {
font-weight: normal;
& .header {
font-weight: bold;
}
@nest .body & {
color: black;
}
}
用cssnext轉(zhuǎn)換為：
.message {
font-weight: normal
}
.message .header {
font-weight: bold;
}
.body .message {
color: black;
}
模塊化CSS modules
:global .title {
font-size: 20px;
}
.content {
font-weight: bold;
}
變?yōu)椋?/p>
.title {
font-size: 20px;
}
._content_6xmce_5 {
font-weight: bold;
}
不能簡單的把 PostCSS 歸類成 CSS 預處理或后處理工具。PostCSS 所能執(zhí)行的任務非常多亭枷，同時涵蓋了傳統(tǒng)意義上的預處理和后處理袭艺。
ps:
AST：抽象語法樹結(jié)構(gòu)（Abstract Syntax Tree）
