それは、PostCSSは本体は何かをするわけではなく、ただツールとしてのAPIを提供しているのでこの結果になりました。実際の処理はPostCSSのプラグインが行います。PostCSSのプラグインpostcss-importpostcss-importは外部ファイルをimportして一つにまとめれるようになります。#00f;}このように1つのCSSにまとめることができます。postcss-custom-propertiespostcss-custom-propertiesは変数を使うことができます。postcss-custom-propertiesgulp.js上のgulpfile.jsに追記していきます。postcss-calcpostcss-calcは四則演算ができます。postcss-calcgulp.js上のgulpfile.jsに追記していきます。50px;}単位を含んでいてもいなくても計算が可能です。postcss-selector-matchespostcss-selector-matchesはセレクタをグルーピングできます。postcss-selector-matchesgulp.js上のgulpfile.jsに追記していきます。#f00;}子要素を指定するセレクタです。postcss-nestingpostcss-nestingはネスト記法が使えます。postcss-nestinggulp.js上のgulpfile.jsに追記していきます。use...」をもとに、ベンダープレフィックスを自動でつけてくれます。autoprefixergulp.js上のgulpfile.jsに追記していきます。flex;}postcss-custom-mediapostcss-custom-mediaはメディアクエリの定義を変数化できます。postcss-custom-mediagulp.js上のgulpfile.jsに追記していきます。展開しますcss-mqpackerこのプラグインはcssnextに含まれていませんが、便利なので入れています。css-mqpackerは散らばったメディアクエリを集めてくれます。css-mqpackergulp.js上のgulpfile.jsに追記していきます。}}このようにセレクタに直接メディアクエリを書くことで、修正が簡単になります。そのまま出力してしまうとCSSもくちゃぐちゃで、記述が増えてしましますが、このプラグインを通すことでメディアクエリごとにまとまります。LESSなどプリプロセッサーがいくつも出ていますが、PostCSSをつかうことで、方向修正がゼロというわけではないですが、最低限で次世代のCSSに対応できるとようになると思います。広島で活動するフロントエンドエンジニア。