はじめてPostCSSを
使ってみたのでまとめてみました。

PostCSSとは

Node.js制の、
CSSツールを作るためのフレームワークです。

PostCSS自体はただのパーサーであり、
CSSを受け取り、パースしてARTを生成するという役割を果たしています。

PostCSSを使うメリット

ビルドして～してを、
PostCSSのエコシステムで全て解決できます。

Custom Syntaxesという機能を用いることで、
自分の欲しい機能だけカスタマイズすることができます。
このカスタマイズこそがPostCSSの最大の特徴であると
私自身は感じています。
下記でプラグインごとの書き方を少しご紹介します

ビルドツールはgulpを使用しています。
Node.js v8.11.2
gulp v3.9.1

postcss-custom-propertiesをインストールすると、
Sass記法のように変数定義ができるようになります。
下記の通り、:root内で定義可能です。

postcss-nestedをインストールすると、
ネストでの記述が可能になります。

下記では、color-cssとbtn-cssというファイルを
style.cssでimportしています。

Sassを普段から使用しているので
非常にとっつきやすかったです☺

プラグインの選定は下記からもできそうです。
自分にあったプラグイン選定にお役立てください