PostCSS 以及 cssnext語法

前往懸崖下尋寶的神三算จุ๊บ發表於2018-05-24
CSS

本文是對近兩天學習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結合使用

PostCSS 以及 cssnext語法

關於取捨

雖然可以結合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

相關文章