Postcss-cssnext features

注：根據(jù)你的瀏覽器兼容范圍設(shè)置有一些轉(zhuǎn)換會被跳過以避免額外的無用輸出。例如：如果你的兼容目標(biāo)不不包括IE 8，rem 和 rgba 編譯轉(zhuǎn)換會被跳過。

自動補全CSS屬性前綴

CSS屬性會根據(jù)你設(shè)置的瀏覽器兼容范圍使用autoprefixer自動加上或去掉不必要的CSS屬性前綴

CSS變量

變量名前要加兩根連詞線（--），用var()函數(shù)來讀取變量。

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

自定義屬性與var()

目前的自定義屬性轉(zhuǎn)換旨在提供一種未來的對CSS自定義屬性的用法。

:root {
  --mainColor: red;
}

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

編譯結(jié)果

a {
  color: red;
}

上述定義的指定CSS屬性變量作用范圍限制在 :root 選擇器中使用。（:root 選擇器代表html根元素）

自定義屬性變量與@apply

允許用一個變量定義一套css屬性規(guī)則，然后在其他地方使用@apply應(yīng)用該套規(guī)則。

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

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

編譯結(jié)果：

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

該變量的作用范圍限制在:root選擇器范圍內(nèi)

calc()

允許你使用calc()通過var()引用計算已定義的變量。

:root {
  --fontSize: 1rem;
}

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

編譯結(jié)果：

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 */
}

編譯結(jié)果：

/* 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 */
}

編譯結(jié)果：

@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 */
}

自定義選擇器

允許你創(chuàng)造自己的自定義選擇器

@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
   */
}

編譯結(jié)果：

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
   */
}

嵌套規(guī)則

允許你嵌套選擇器

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;
  }
}

編譯結(jié)果：

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 {
  /* 媒體查詢會自動將外層嵌套進(jìn)來*/
}
@media (min-width: 30em) {
  a {
    color: yellow;
  }
}

image-set() 函數(shù)

允許你根據(jù)不同設(shè)備的分辨率設(shè)置對應(yīng)的圖片

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

編譯結(jié)果：

.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);
    }
}
  /* 逗號相當(dāng)與or運算符*/
@media (-webkit-min-device-pixel-ratio: 6.25), (min-resolution: 600dpi) {
    .foo {
        background-image: url(my-img-print.png);
    }
}

color() 函數(shù)

用來改變顏色的函數(shù)，編譯成rgba()形式

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

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

編譯結(jié)果：

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

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

還有更多的顏色函數(shù)，詳情請點擊這里

hwb() 函數(shù)

與hsl()類似，但更加簡單，編譯成rgba()形式

HSL: H 色調(diào)；S 飽和度；L 亮度；hsl()
HSLA: A 透明度；hsla()

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

編譯結(jié)果：

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

gray() 函數(shù)

編譯成rgba()
···
.foo {
color: gray(85);
}

.bar {
color: gray(10%, 50%);
}
···
編譯結(jié)果：

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

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

rrggbbaa 顏色

允許使用4位或8位十六進(jìn)制數(shù)字表示顏色，編譯成rgba()

body {
  background: #9d9c;
}

編譯結(jié)果：

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

rgba 函數(shù)降級

如果瀏覽器兼容范圍包括如IE 8 等舊瀏覽器，會將rgba()編譯成rgb()

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

編譯結(jié)果：

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;
}

編譯結(jié)果：

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);
}

編譯結(jié)果：

    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值，這個值代表該屬性的初始值，注意該值并不是瀏覽器的默認(rèn)值。
例如： 對于display屬性，initial等于inline，因為這是display設(shè)計時的初始值

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

編譯結(jié)果：

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

rem單位

如果你需要兼容舊瀏覽器，rem降級為px

h1 {
  font-size: 1.5rem;
}

編譯結(jié)果：

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

:any-link 偽類

允許你使用:any-link偽類

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

編譯結(jié)果：

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

:marches 偽類

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

編譯結(jié)果：

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

:not 偽類

允許你使用:not level4（允許你使用多個選擇器），編譯成:not level3（只允許一個選擇器）。

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

編譯結(jié)果：

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

::偽元素語法降級為:偽類

兼容瀏覽器時生效

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

編譯結(jié)果：

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

overflow-wrap 屬性(單詞換行，英文字母太長不會自動換行)

overflow-wrap 降級為 word-wrap

body {
  overflow-wrap: break-word;
}

編譯結(jié)果：

body {
  word-wrap: break-word;
}

屬性大小寫不敏感

允許你使用大小寫不敏感的寫法

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

編譯結(jié)果：

[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() 函數(shù)

可以編譯為rgba()

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

編譯結(jié)果：

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

hsl() 函數(shù)

編譯為hsla()

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

編譯結(jié)果：

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

system-ui 字體（系統(tǒng)平臺默認(rèn)字體）

提供一系列默認(rèn)字體作為后備

body {
  font-family: system-ui;
}

編譯結(jié)果：

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

參考鏈接

postcss cssnext
CSS 變量教程 阮一峰

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

友情鏈接更多精彩內(nèi)容