ぽすとしーえすえす。僕は普段CSSを書くときにはSassを使っていますが、最近PostCSSの名前を頻繁に目にするようになったので、備忘録も兼ねて概要や導入方法、Sassとの違いなんかを見ていきたいと思います。

PostCSS とは?

PostCSS

PostCSSは「JavaScriptプラグインを用いてCSSを変換するツール」(README直訳)で、node.js製です。Sass等のCSSプリプロセッサとは違ってPostCSS自体にmixinやネストなどの機能は搭載されておらず、プラグインを追加していろいろやっていくという仕組みになっています。言うなればMinecraft serverにおけるspigotみたいなイメージですかね(伝わらない)。

自分でプラグインを選んで必要な機能だけを追加していけること、必要になれば自分でプラグインを作ることも可能なことなど、柔軟性の高さが特徴なんですね。また、Sassと比べて圧倒的にコンパイル速度が速いという利点もあるようです。LibSassより4倍速いとか(参考: https://html5experts.jp/t32k/17235/)。

実際に使ってみる

PostCSSはいろんな環境で使えますが、僕はタスクランナーにgulpを使っているので、今回はgulpで環境を構築してみます。WebpackやGruntなどでも使えるよ。gulp記事も近々書きたいね!

まずgulpプラグインである gulp-postcss と使いたいPostCSSプラグインをインストールします。今回はとりあえずautoprefixer(ベンダープレフィックスをつけてくれるやつ)と、PreCSS(Sassライクな変数、mixin、継承などが使えるようになるやつ)を使ってみます。

npm install gulp gulp-postcss autoprefixer precss --save-dev

次に、適当にgulpfile.jsを書きます。

/* gulpfile.js */
var gulp = require( 'gulp' );
var postcss = require( 'gulp-postcss' );

gulp.task( 'postcss', function() {
	gulp.src( 'src/postcss/*.css' )
		.pipe( postcss( [ require( 'autoprefixer' ), require( 'precss' ) ] ) )
		.pipe( gulp.dest( 'asset/css' ) );
});

gulp.task( 'default', function() {
	gulp.watch( 'src/postcss/*css', [ 'postcss' ] );
});

PostCSSはSassみたいな言語ではなくCSSからCSSへと変換するツールなので拡張子も .css が使われていますが、AtomでPostCSSのシンタックスハイライトを追加するパッケージ「language-postcss」では .pcss を使っているようです。

で、適当にCSSを書いて実行してみると・・・

PostCSSのコンパイル結果
イエス!✌️

Sass + gulpで普段からできていることなので感動はないですが、いけますね。

Sassとどっちが良いか

PostCSSに関心がある人の多くは現在Sassを使っていて、その置き換えとしてPostCSSはどうなの、という点が気になるところだと思います。これに関しては僕がまだ全然使ってないというのもありますが、まだちょっと結論は出せないかなあという感じです。

Sassに慣れているので、できることがそんな劇的に変わるわけではない(と思う)PostCSSにわざわざ乗り換える必要があるのかなというのがあるんですよね。

ただ、やっぱり速度が速いというのはかなり魅力的ですし、プラグインもかなり豊富プラグインカタログ眺めてるとおもろそうなやつもあります。あと、gulpで長々とパイプをつなげていくminifyやautoprefixerなどをPostCSSの配列内にまとめられるというのはなんかキレイで良いですね。

まあ、いろいろ使ってみて「PostCSSの方が良い!」ってなったら乗り換えます。

というわけで次回のPostCSS記事では便利なプラグインを見つけてきて紹介したいと思います。