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