什么是postcss
postcss 一種對css編譯的工具，類似babel對js的處理，常見的功能如：
1 . 使用下一代css語法
2 . 自動補全瀏覽器前綴
3 . 自動把px代為轉換成 rem
4 . css 代碼壓縮等等
postcss 只是一個工具，本身不會對css一頓操作，它通過插件實現功能，autoprefixer 就是其一。
與 less sass 的區別
less sass 是預處理器，用來支持擴充css語法。
postcss 既不是預處理器也不是后處理器，其功能比較廣泛，而且重要的一點是，postcss可以和less/sass結合使用
關於取舍
雖然可以結合less/sass使用，但是它們還是有很多重復功能，用其中一個基本就 ok 了。
以下是個人總結：
-
postcss 鼓勵開發者使用規范的CSS原生語法編寫源代碼，支持未來的css語法，就像babel支持ES6，而且高版本的谷歌瀏覽器已支持部分語法
-
less、sass 擴展了原生的東西，它把css作為一個子集，這意味這它比原生更強大，但是遲早會和原生的功能重復，比如css變量定義高版本的谷歌已經支持，再比如js現在的
require和import。 -
可以結合使用
現階段來說區別不大，看個人喜好吧
如何使用
這里只說在webpack里集成使用，首先需要 loader
1 . 安裝
cnpm install postcss-loader --save-dev
2 . webpack配置
一般與其他loader配合使用，下面*標部分才是postcss用到的
配合時注意loader的順序（從下面開始加載）
rules: [
{
test: /\.css$/, exclude: /node_modules/, use: [ { loader: 'style-loader', }, { loader: 'css-loader', options: { importLoaders: 1, } }, {//* loader: 'postcss-loader' } ] } ] 3 . postcss配置
項目根目錄新建 postcss.config.js 文件，所有使用到的插件都需在這里配置，空配置項時配置xx:{}
module.exports = { plugins: { 'autoprefixer': { browsers: '> 5%' //可以都不填，用默認配置 } } } 注：也可以在webpack中配置
常用的postcss插件
autoprefixer
前綴補全，全自動的，無需多說
安裝：cnpm install autoprefixer --save-dev
postcss-cssnext
使用下個版本的css語法，語法見cssnext (css4)語法
安裝：cnpm install postcss-cssnext --save-dev
別忘了在
postcss.config.js配置：'postcss-cssnext':{}
cssnext包含了 autoprefixer ，都安裝會報錯，如下：
Warning: postcss-cssnext found a duplicate plugin ('autoprefixer') in your postcss plugins. This might be inefficient. You should remove 'autoprefixer' from your postcss plugin list since it's already included by postcss-cssnext. postcss-pxtorem
把px轉換成rem
安裝：cnpm install postcss-pxtorem --save-dev
配置項：
{
rootValue: 16, //你在html節點設的font-size大小 unitPrecision: 5, //轉rem精確到小數點多少位 propList: ['font', 'font-size', 'line-height', 'letter-spacing'],//指定轉換成rem的屬性，支持 * ！ selectorBlackList: [],// str/reg 指定不轉換的選擇器，str時包含字段即匹配 replace: true, mediaQuery: false, //媒體查詢內的px是否轉換 minPixelValue: 0 //小於指定數值的px不轉換 } 特殊技巧:不轉換成rem
px檢測區分大小寫，也就是說Px/PX/pX不會被轉換，可以用這個方式避免轉換成rem
相關資料： 官網
cssnext (css4)語法
cssnext 和 css4 並不是一個東西，cssnext使用下個版本css的草案語法
自定義屬性
相當於一個變量，變量的好處顯而易見，重復使用
1 . 定義
在 :root 選擇器定義一個css屬性
:root{ --mianColor:#ffc001; } 2 . 使用
使用 var(xx) 調用自定義屬性
.test{ background: var(--mianColor); } /*編譯后*/ .test{ background: #ffc001; } 比如在網站顏色上的使用，避免復制粘貼顏色
自定義屬性集
一個變量里存了多個屬性
1 . 定義
在 :root 選擇器定義一個css屬性集
:root{ --fontCommon:{ font-size:14px; font-family: 微軟雅黑; }; } 2 . 使用
使用 @apply xx 調用屬性集
.test{ @apply --fontCommon; } /*編譯后*/ .test{ font-size:14px; font-family: 微軟雅黑; } 大小計算
一般用於px rem等的計算
語法：cale(四則運算)
/*css3*/ .test { width: calc(100% - 50px); } /*css4 允許變量*/ :root { --fontSize: 1rem; } h1 { font-size: calc(var(--fontSize) * 2); } /*編譯后*/ .test{ font-size: 32px; font-size: 2rem; } 自定義定義媒體查詢
1 . 定義
語法 @custom-media xx (條件) and (條件)
@custom-media --small-viewport (max-width: 30rem); 另外css4 可以使用>= 和 <= 代替min-width 、max-width
2 . 使用
@media (width >= 500px) and (width <= 1200px) { } @media (--small-viewport) { } /*編譯后*/ @media (min-width: 500px) and (max-width: 1200px) { } @media (max-width: 30rem) { } 自定義選擇器
1 . 定義
語法：@custom-selector :name selector1, selector2;
@custom-selector 后必須有空格
@custom-selector :--test .test1,.test2; 2 . 使用
語法：:name
:--test{ color: #fff; } /*編譯后*/ .test1, .test2{ color: #fff; } 注：與偽類使用，相互組合
@custom-selector :--test .test1,.test2; @custom-selector :--testClass :hover,:focus; :--test:--testClass{ color: #fff; } /*編譯后*/ .test1:hover, .test2:hover, .test1:focus, .test2:focus{ color: #fff; } 選擇器嵌套
支持嵌套后，css代碼就不那么混亂了，而且方便
1 . 直接嵌套
語法 &
.test { & span { color: white; } } /*編譯后*/ .test span { color: white; } 2 . 指定如何嵌套
語法：@nest ... & ...,&指定位置
a { @nest span & { color: blue; } } /*編譯后*/ span a { color: blue; } 3 . 自動嵌套（媒體查詢中）
媒體查詢中自動嵌套到內部
.test {
@media (min-width: 30rem) { color: yellow; } } /*編譯后*/ @media (min-width: 30rem) { .test { color: yellow; } } image-set() 圖像依據分辨率設置不同的值
不常使用，后續補充
color() 調整顏色
示例，使用 color(value alpha(百分比)) 調整顏色
.test { color: color(red alpha(-10%)); } /*編譯后*/ .test { color: rgba(255, 0, 0, 0.9); } font-family 新增值 system-ui
system-ui 采用所有系統字體作為后備字體
body { font-family: system-ui; } /*編譯后*/ body { font-family: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Droid Sans, Helvetica Neue; }