less_プリコンパイル_ポストコンパイル

lessリファレンス
プリコンパイルの使用例:
たとえばless/sassを書く場合、定義した変数は、パブリッシュ前にプリコンパイルして対応するcssを生成します.
ポストコンパイルの使用例:
例えばブラウザ互換書き方のcssを書く場合、-webkit、-moz、-oなどの行がたくさんありますが、この場合は最も標準的なcss文法を直接書いて、最後にコンパイルして互換バージョンのcssを生成することができます.
lessで注意すべき構文:

ネストに擬似クラスが現れる場合&現在のセレクタ自体を表す例えばヘッダの下に書く.contentの:after擬似クラス:

#header {
  .content {
    display: none;

    &:after { /*&   .content  */
      content: '';
      display: block;
      clear: both;
    }
  }
}

cssと同じです

#header .content {
  display: none;
}
#header .content:after {
  /*&   .content  */
  content: '';
  display: block;
  clear: both;
}

はヘッダを実現する.content>pのセレクタ効果の場合:

#header {
  .content {
    > p{
      color: red;
    }
  }
}

postcssについて
まず、ツールnpm install postcss -g npm install postcss-cli -gを取り付けます.
標準cssファイルを書きます.

@keyframes move {
  from {
    left: 0;
  }
  to {
    left: 200px;
  }
}

postcss -u autoprefixer -r senior/*.cssによってコンパイルされ、

@-webkit-keyframes move {
  from {
    left: 0;
  }
  to {
    left: 200px;
  }
}
@keyframes move {
  from {
    left: 0;
  }
  to {
    left: 200px;
  }
}

互換性のある接頭辞が自動的に追加されます