本文是對近兩天學(xué)習(xí)postcss的總結(jié)，在這里分享給大家。

如有錯誤，還請指正！

什么是postcss

postcss 一種對css編譯的工具，類似babel對js的處理，常見的功能如：

1 . 使用下一代css語法

2 . 自動補全瀏覽器前綴

3 . 自動把px代為轉(zhuǎn)換成 rem

4 . css 代碼壓縮等等

postcss 只是一個工具，本身不會對css一頓操作，它通過插件實現(xiàn)功能，autoprefixer 就是其一。

與 less sass 的區(qū)別

less sass 是預(yù)處理器，用來支持擴充css語法。

postcss 既不是預(yù)處理器也不是后處理器，其功能比較廣泛，而且重要的一點是，postcss可以和less/sass結(jié)合使用

關(guān)于取舍

雖然可以結(jié)合less/sass使用，但是它們還是有很多重復(fù)功能，用其中一個基本就 ok 了。

以下是個人總結(jié)：

• postcss 鼓勵開發(fā)者使用規(guī)范的CSS原生語法編寫源代碼，支持未來的css語法，就像babel支持ES6，而且高版本的谷歌瀏覽器已支持部分語法

• less、sass 擴展了原生的東西，它把css作為一個子集，這意味這它比原生更強大，但是遲早會和原生的功能重復(fù)，比如css變量定義高版本的谷歌已經(jīng)支持，再比如js現(xiàn)在的 require 和 import。

• 可以結(jié)合使用

現(xiàn)階段來說區(qū)別不大，看個人喜好吧

如何使用

這里只說在webpack里集成使用，首先需要 loader

1 . 安裝

cnpm install postcss-loader --save-dev 復(fù)制代碼

2 . webpack配置

一般與其他loader配合使用，下面*標部分才是postcss用到的

配合時注意loader的順序（從下面開始加載）

rules: [{test: /\.css$/,exclude: /node_modules/,use: [{loader: 'style-loader',},{loader: 'css-loader',options: {importLoaders: 1,}},{//*loader: 'postcss-loader'}]} ] 復(fù)制代碼

3 . postcss配置

項目根目錄新建 postcss.config.js 文件，所有使用到的插件都需在這里配置，空配置項時配置xx:{}

module.exports = {plugins: {'autoprefixer': {browsers: '> 5%' //可以都不填，用默認配置}} } 復(fù)制代碼

注：也可以在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. 復(fù)制代碼

postcss-pxtorem

把px轉(zhuǎn)換成rem

安裝：cnpm install postcss-pxtorem --save-dev

配置項：

{rootValue: 16, //你在html節(jié)點設(shè)的font-size大小unitPrecision: 5, //轉(zhuǎn)rem精確到小數(shù)點多少位propList: ['font', 'font-size', 'line-height', 'letter-spacing'],//指定轉(zhuǎn)換成rem的屬性，支持 * ！selectorBlackList: [],// str/reg 指定不轉(zhuǎn)換的選擇器，str時包含字段即匹配replace: true,mediaQuery: false, //媒體查詢內(nèi)的px是否轉(zhuǎn)換minPixelValue: 0 //小于指定數(shù)值的px不轉(zhuǎn)換 } 復(fù)制代碼

特殊技巧:不轉(zhuǎn)換成rem

px檢測區(qū)分大小寫，也就是說Px/PX/pX不會被轉(zhuǎn)換，可以用這個方式避免轉(zhuǎn)換成rem

相關(guān)資料： 官網(wǎng)

cssnext (css4)語法

cssnext 和 css4 并不是一個東西，cssnext使用下個版本css的草案語法

自定義屬性

相當于一個變量，變量的好處顯而易見，重復(fù)使用

1 . 定義

在 :root 選擇器定義一個css屬性

:root{--mianColor:#ffc001; } 復(fù)制代碼

2 . 使用

使用 var(xx) 調(diào)用自定義屬性

.test{background: var(--mianColor); }/*編譯后*/ .test{background: #ffc001; } 復(fù)制代碼

比如在網(wǎng)站顏色上的使用，避免復(fù)制粘貼顏色

自定義屬性集

一個變量里存了多個屬性

1 . 定義

在 :root 選擇器定義一個css屬性集

:root{--fontCommon:{font-size:14px;font-family: 微軟雅黑;}; } 復(fù)制代碼

2 . 使用

使用 @apply xx 調(diào)用屬性集

.test{@apply --fontCommon; }/*編譯后*/ .test{font-size:14px;font-family: 微軟雅黑; } 復(fù)制代碼

大小計算

一般用于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; } 復(fù)制代碼

自定義定義媒體查詢

1 . 定義

語法 @custom-media xx (條件) and (條件)

@custom-media --small-viewport (max-width: 30rem); 復(fù)制代碼

另外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) {} 復(fù)制代碼

自定義選擇器

1 . 定義

語法：@custom-selector :name selector1, selector2;

@custom-selector 后必須有空格

@custom-selector :--test .test1,.test2; 復(fù)制代碼

2 . 使用

語法：:name

:--test{color: #fff; }/*編譯后*/ .test1, .test2{color: #fff; }復(fù)制代碼

注：與偽類使用，相互組合

@custom-selector :--test .test1,.test2; @custom-selector :--testClass :hover,:focus; :--test:--testClass{color: #fff; }/*編譯后*/ .test1:hover, .test2:hover, .test1:focus, .test2:focus{color: #fff; } 復(fù)制代碼

選擇器嵌套

支持嵌套后，css代碼就不那么混亂了，而且方便

1 . 直接嵌套

語法 &

.test {& span {color: white;} }/*編譯后*/ .test span {color: white; } 復(fù)制代碼

2 . 指定如何嵌套

語法：@nest ... & ...,&指定位置

a {@nest span & {color: blue;} }/*編譯后*/ span a {color: blue; } 復(fù)制代碼

3 . 自動嵌套（媒體查詢中）

媒體查詢中自動嵌套到內(nèi)部

.test {@media (min-width: 30rem) {color: yellow;} }/*編譯后*/ @media (min-width: 30rem) {.test {color: yellow;} } 復(fù)制代碼

image-set() 圖像依據(jù)分辨率設(shè)置不同的值

不常使用，后續(xù)補充

color() 調(diào)整顏色

示例，使用 color(value alpha(百分比)) 調(diào)整顏色

.test {color: color(red alpha(-10%)); }/*編譯后*/ .test {color: rgba(255, 0, 0, 0.9); } 復(fù)制代碼

font-family 新增值 system-ui

system-ui 采用所有系統(tǒng)字體作為后備字體

body {font-family: system-ui; }/*編譯后*/ body {font-family: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Droid Sans, Helvetica Neue; } 復(fù)制代碼

更多在官網(wǎng)查看

參考資料：官方網(wǎng)站 左手121

總結(jié)

以上是生活随笔為你收集整理的PostCSS 以及 cssnext语法的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。