cssnext使用的是下一代css语法，而且高版本的浏览器已支持部分语法

另外 React Redux ES6 Webpack...... 更多干货在个人主页中查看

cssnext 包含了下个版本css的草案语法（暂称css4），它的使用类似Babel对es6，需要postcss编译，关于postcss的使用请看上一篇文章：点这里

自定义属性

相当于一个变量，变量的好处显而易见，重复使用

1 . 定义

在 :root 选择器定义一个css属性

2 . 使用

使用 var(xx) 调用自定义属性

比如在网站颜色上的使用，避免复制粘贴颜色

自定义属性集

一个变量里存了多个属性

1 . 定义

在 :root 选择器定义一个css属性集

2 . 使用

使用 @apply xx 调用自属性集

大小计算

一般用于px rem等的计算

语法：cale(四则运算)

自定义定义媒体查询

1 . 定义

语法 @custom-media xx (条件) and (条件)

另外css4 可以使用>= 和 <= 代替min-width 、max-width

2 . 使用

自定义选择器

1 . 定义

语法：@custom-selector :xx selector1, selector2;

@custom-selector 后必须有空格

2 . 使用

语法：:name

注：与伪类使用，相互组合

选择器嵌套

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

1 . 直接嵌套

语法 &

2 . 指定如何嵌套

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

3 . 自动嵌套（媒体查询中）

媒体查询中自动嵌套到内部

image-set() 图像依据分辨率设置不同的值

不常使用，后续补充

color() 调整颜色

示例，使用 color(value alpaha(百分比)) 调整颜色

font-family 新增值 system-ui

system-ui 采用所有系统字体作为后备字体

这里只介绍常用的cssnext语法，更多以及将来可能添加的语法可以在官网中找到

【关注一下不迷路】

html css html css javascript html javascript css javascript css