cssnext構文の説明

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