PostCSS 以及 cssnext語法

本文是對近兩天學習postcss的總結，在這裏分享給你們。

若有錯誤，還請指正！

什麼是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;
}
複製代碼

更多在官網查看

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