PostCSS以及cssnext語法

什麼是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結合使用

image

關於取捨

---

雖然能夠結合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; } 

更多在官網查看

參考資料：官方網站 左手121