Postcss-cssnext features

注：根据你的浏览器兼容范围设置有一些转换会被跳过以避免额外的无用输出。例如：如果你的兼容目标不不包括IE 8，rem 和 rgba 编译转换会被跳过。

自动补全CSS属性前缀

CSS属性会根据你设置的浏览器兼容范围使用autoprefixer自动加上或去掉不必要的CSS属性前缀

CSS变量

变量名前要加两根连词线（--），用var()函数来读取变量。

--foo: #233234
var(--foo)

自定义属性与var()

目前的自定义属性转换旨在提供一种未来的对CSS自定义属性的用法。

:root {
  --mainColor: red;
}

a {
  color: var(--mainColor);
}

编译结果

a {
  color: red;
}

上述定义的指定CSS属性变量作用范围限制在 :root 选择器中使用。（:root 选择器代表html根元素）

自定义属性变量与@apply

允许用一个变量定义一套css属性规则，然后在其他地方使用@apply应用该套规则。

:root {
  --danger-theme: {
    color: white;
    background-color: red;
  };
}

.danger {
  @apply --danger-theme;
}

编译结果：

.danger {
  color: white;
  background-color: red;
}

该变量的作用范围限制在:root选择器范围内

calc()

允许你使用calc()通过var()引用计算已定义的变量。

:root {
  --fontSize: 1rem;
}

h1 {
  font-size: calc(var(--fontSize) * 2);
}

编译结果：

h1 {
  font-size: 32px;
  font-size: 2rem;
}

自定义媒体查询media

一种相对简洁的媒体查询语法

@custom-media --small-viewport (max-width: 30em);
/* check out media queries ranges for a better syntax !*/

@media (--small-viewport) {
  /* styles for small viewport */
}

编译结果：

/* check out media queries ranges for a better syntax !*/

@media (max-width: 30em) {
  /* styles for small viewport */
}

媒体查询范围

允许使用<= 和 >= 代替 min- 和 max- 限定媒体查询范围

@media (width >= 500px) and (width <= 1200px) {
  /* your styles */
}

/* or coupled with custom media queries */
@custom-media --only-medium-screen (width >= 500px) and (width <= 1200px);

@media (--only-medium-screen) {
  /* your styles */
}

编译结果：

@media (min-width: 500px) and (max-width: 1200px) {
  /* your styles */
}

/* or coupled with custom media queries */

@media (min-width: 500px) and (max-width: 1200px) {
  /* your styles */
}

自定义选择器

允许你创造自己的自定义选择器

@custom-selector :--button button, .button;
@custom-selector :--enter :hover, :focus;

:--button {
  /* styles for your buttons */
}
:--button:--enter {
  /*
    hover/focus styles for your button

    Read more about :enter proposal
    http://discourse.specifiction.org/t/a-common-pseudo-class-for-hover-and-focus/877
   */
}

编译结果：

button,
.button {
  /* styles for your buttons */
}
button:hover,
.button:hover,
button:focus,
.button:focus {
  /*
    hover/focus styles for your button

    Read more about :enter proposal
    http://discourse.specifiction.org/t/a-common-pseudo-class-for-hover-and-focus/877
   */
}

嵌套规则

允许你嵌套选择器

a {
  /* direct nesting (& MUST be the first part of selector)*/
}
a span {
  color: white;
}
a {
  /* @nest rule (for complex nesting)*/
}
span a {
  color: blue;
}
a {
  /* media query automatic nesting*/
}
@media (min-width: 30em) {
  a {
    color: yellow;
  }
}

编译结果：

a {
  /* direct nesting (& MUST be the first part of selector)*/
}
a span {
  color: white;
}
a {
  /* @nest rule (for complex nesting)*/
}
span a {
  color: blue;
}
a {
  /* 媒体查询会自动将外层嵌套进来*/
}
@media (min-width: 30em) {
  a {
    color: yellow;
  }
}

image-set() 函数

允许你根据不同设备的分辨率设置对应的图片

.foo {
    background-image: image-set(url(img/test.png) 1x,
                                url(img/test-2x.png) 2x,
                                url(my-img-print.png) 600dpi);
}

编译结果：

.foo {
    background-image: url(img/test.png);
}
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    .foo {
        background-image: url(img/test-2x.png);
    }
}
  /* 逗号相当与or运算符*/
@media (-webkit-min-device-pixel-ratio: 6.25), (min-resolution: 600dpi) {
    .foo {
        background-image: url(my-img-print.png);
    }
}

color() 函数

用来改变颜色的函数，编译成rgba()形式

a {
  color: color(red alpha(-10%));
}

  a:hover {
    color: color(red blackness(80%));
  }

编译结果：

a {
  color: rgba(255, 0, 0, 0.9);
}

  a:hover {
    color: rgb(51, 0, 0);
  }

还有更多的颜色函数，详情请点击这里

hwb() 函数

与hsl()类似，但更加简单，编译成rgba()形式

HSL: H 色调；S 饱和度；L 亮度；hsl()
HSLA: A 透明度；hsla()

body {
  color: hwb(90, 0%, 0%, 0.5);
}

编译结果：

body {
  color: rgba(128, 255, 0, .5);
}

gray() 函数

编译成rgba()
···
.foo {
color: gray(85);
}

.bar {
color: gray(10%, 50%);
}
···
编译结果：

.foo {
  color: rgb(85, 85, 85);
}

.bar {
  color: rgba(26, 26, 26, 0.5);
}

rrggbbaa 颜色

允许使用4位或8位十六进制数字表示颜色，编译成rgba()

body {
  background: #9d9c;
}

编译结果：

body {
  background: rgba(153, 221, 153, 0.8);
}

rgba 函数降级

如果浏览器兼容范围包括如IE 8 等旧浏览器，会将rgba()编译成rgb()

body {
  background: rgba(153, 221, 153, 0.8);
  /* you will have the same value without alpha as a fallback */
}

编译结果：

body {
  background: rgba(153, 221, 153, .8);
  /* you will have the same value without alpha as a fallback */
}

font-variant 属性

降级为font-feature-settings

h2 {
  font-variant-caps: small-caps;
}

table {
  font-variant-numeric: lining-nums;
}

编译结果：

h2 {
  -webkit-font-feature-settings: "c2sc";
          font-feature-settings: "c2sc";
  font-variant-caps: small-caps;
}

table {
  -webkit-font-feature-settings: "lnum";
          font-feature-settings: "lnum";
  font-variant-numeric: lining-nums;
}

filter 属性

将filter属性编译为svg filter

.blur {
    filter: blur(4px);
}

编译结果：

    filter: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg"><filter id="filter"><feGaussianBlur stdDeviation="4" /></filter></svg>#filter');
    -webkit-filter: blur(4px);
            filter: blur(4px);
}

初始值initial

允许你对任何属性使用initial值，这个值代表该属性的初始值，注意该值并不是浏览器的默认值。
例如：对于display属性，initial等于inline，因为这是display设计时的初始值

div {
  display: initial; /* inline */
}

编译结果：

div {
  display: inline;
  display: initial; /* inline */
}

rem单位

如果你需要兼容旧浏览器，rem降级为px

h1 {
  font-size: 1.5rem;
}

编译结果：

h1 {
  font-size: 24px;
  font-size: 1.5rem;
}

:any-link 伪类

允许你使用:any-link伪类

nav :any-link {
  background-color: yellow;
}

编译结果：

nav :link,nav :visited {
  background-color: yellow;
}

:marches 伪类

p:matches(:first-child, .special) {
  color: red;
}

编译结果：

p:first-child, p.special {
  color: red;
}

:not 伪类

允许你使用:not level4（允许你使用多个选择器），编译成:not level3（只允许一个选择器）。

p:not(:first-child, .special) {
  color: red;
}

编译结果：

p:not(:first-child):not(.special) {
  color: red;
}

::伪元素语法降级为:伪类

兼容浏览器时生效

a::before {
  /* ... */
}

编译结果：

a::before {
  /* ... */
}
 /* 例如兼容IE 8 时*/
a:before {
  /* ... */
}

overflow-wrap 属性(单词换行，英文字母太长不会自动换行)

overflow-wrap 降级为 word-wrap

body {
  overflow-wrap: break-word;
}

编译结果：

body {
  word-wrap: break-word;
}

属性大小写不敏感

允许你使用大小写不敏感的写法

[frame=hsides i] {
  border-style: solid none;
}

编译结果：

[frame=hsides],[frame=Hsides],[frame=hSides],[frame=HSides],[frame=hsIdes],[frame=HsIdes],[frame=hSIdes],[frame=HSIdes],[frame=hsiDes],[frame=HsiDes],[frame=hSiDes],[frame=HSiDes],[frame=hsIDes],[frame=HsIDes],[frame=hSIDes],[frame=HSIDes],[frame=hsidEs],[frame=HsidEs],[frame=hSidEs],[frame=HSidEs],[frame=hsIdEs],[frame=HsIdEs],[frame=hSIdEs],[frame=HSIdEs],[frame=hsiDEs],[frame=HsiDEs],[frame=hSiDEs],[frame=HSiDEs],[frame=hsIDEs],[frame=HsIDEs],[frame=hSIDEs],[frame=HSIDEs],[frame=hsideS],[frame=HsideS],[frame=hSideS],[frame=HSideS],[frame=hsIdeS],[frame=HsIdeS],[frame=hSIdeS],[frame=HSIdeS],[frame=hsiDeS],[frame=HsiDeS],[frame=hSiDeS],[frame=HSiDeS],[frame=hsIDeS],[frame=HsIDeS],[frame=hSIDeS],[frame=HSIDeS],[frame=hsidES],[frame=HsidES],[frame=hSidES],[frame=HSidES],[frame=hsIdES],[frame=HsIdES],[frame=hSIdES],[frame=HSIdES],[frame=hsiDES],[frame=HsiDES],[frame=hSiDES],[frame=HSiDES],[frame=hsIDES],[frame=HsIDES],[frame=hSIDES],[frame=HSIDES] {
  border-style: solid none;
}

rgb() 函数

可以编译为rgba()

div {
  background-color: rgb(100 222.2 100.9 / 30%);
}

编译结果：

div {
  background-color: rgba(100, 222, 101, .3);
}

hsl() 函数

编译为hsla()

div {
  color: hsl(90deg 90% 70%);
  background-color: hsl(300grad 25% 15% / 70%);
}

编译结果：

div {
  color: hsl(90, 90%, 70%);
  background-color: hsla(270, 25%, 15%, .7);
}

system-ui 字体（系统平台默认字体）

提供一系列默认字体作为后备

body {
  font-family: system-ui;
}

编译结果：

body {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue;
}

参考链接

postcss cssnext
CSS 变量教程阮一峰