支持書寫CSS未來語法的插件，文章整理了支持PostCSS的常用語法

• 自定義屬性 & var()
• 自定義屬性集 & @apply
• calc() & var()
• 媒體查詢 & @custom-media
• 自定義選擇器 & @custom-selector
• 嵌套 & &
• color()

自定義屬性 & var()

在 :root{} 中定義常用屬性，使用--前綴命名變量
使用 var() 調用

:root{
    --mainColor: red;
}

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

編譯后樣式

a{
    color: red;
}

自定義屬性集 & @apply

在 :root{} 中定義屬性集，使用 -- 前綴命名屬性集變量名
使用 @apply 進行調用
在 http://cssnext.io/playground/ 在線測試有效

:root {
  --centered: {
    display: flex;
    align-items: center;
    justify-content: center;
  };
}

.centered {
  @apply --centered;
}

編譯后樣式

.centered {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

calc() & var()

使自定義屬性支持 calc()

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

編譯后樣式

h1{
    font-size: calc(1rem*2);
}

媒體查詢 & @custom-media

支持使用<=,>=;代碼在css最后
注意：變量名和括號之間保留空格

@custom-media --small-viewport (max-width: 30em);
@media (--small-viewport){
    body { font-size: 10rem;}
}

編譯后樣式

@media (max-width: 30em){
    body{
        font-size: 10rem;
    }
}

@custom-media --viewport-medium (width <= 50rem);
@media (--viewport-medium) {
body { font-size: calc(var(--fontSize) * 1.2); }
}

編譯后樣式

@media (max-width: 50rem){
    body{
        font-size: calc(1rem * 1.2);
    }
}

@media (width >= 500px) and (width <= 1200px){
    body{
        width: 100%;
    }
}

編譯后結果

@media (min-width: 500px) and (max-width: 1200px){
    body{
        width: 100%;
    }
}

自定義選擇器 & @custom-selector

@custom-selector :--button button, .button;
@custom-selector :--enter :hover, :focus;
@custom-selector :--heading h1, h2, h3, h4, h5, h6;

:--button{
    box-shadow: 0 0 1px black;
}

a:--enter{
    color: black;
}

:--heading { 
    margin-top: 0;
}

編譯后樣式

button, .button{
    box-shadow: 0 0 1px black;
}

a:hover, a:focus{
    color: black;
}

h1, h2, h3, h4, h5, h6 { 
    margin-top: 0;
}

嵌套 & &

@nest selector & 外層嵌套
支持嵌套媒體查詢

a{
    & span{
        color: white;
    }
    
    @nest span &{
        color: blue;
    }
    /*嵌套@media*/
    @media (min-width: 30rem){
        color: yellow;
    }
}

編譯后樣式

a{
}

a span{
    color: white;
}

span a{
    color: blue;
}

@media (min-width: 30em) {
    a{
        color: yellow
    }
}

color()

更多顏色修飾：https://github.com/postcss/postcss-color-function#list-of-color-adjuster

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

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

編譯后樣式

a{
    color: #ff0000;
    color: rgba(255, 0, 0, 0.9);
}
a:hover{
    color: rgb(51, 0, 0);
}

更多語法規則：http://cssnext.io/
文章源碼下載：https://github.com/NalvyBoo/PostCSS-Comn/tree/master/cssnext