PengNote

勉強した事や行った場所の感想を書くブログ

早いしカスタマイズできると噂のPostCSSに触れてみた

普段はSass & Bourbonでオラオラやっているのですが、Sassの機能も主にimportや変数、入れ子、ちょっとした計算くらいで、mixin辺りも使わなくなってきていて、必要な機能だけにしぼりつつ欲しい機能を追加出来たら良いよねって思っていました。

そんな中少し前ですが、自称CSSエンジニアのある人からPostCSSの話を聞いたことを思い出し、今回はサッと導入できそうなものに軽く触れてみました。

PostCSSって?

JSの プラグインを使ってCSSを変換してくれるツール で、導入するプラグインによって色んな処理ができます。

カスタマイズできる点とパフォーマンスが良いという点ではかなり惹かれました。

プラグインについて

結構数が有るみたいでどれを入れると良いのか、そもそも入れたい物ってどれなのかと探すのが大変ですが、使いたいものだけ導入できるのは良いですね。

とりあえずベンダープレフィックスを自動付与してくれるAutoprefixerやコードの圧縮をしてくれるcssnano辺りは鉄板になるだろうなと思います。

その他導入できるプラグインは以下で見ることが出来ます。

postcss/plugins.md at master · postcss/postcss

他にもPostCSS.partsというカテゴリ毎に見ることができるサイトもありました。

gulpでタスクを組んで見る

今回は以下が出来るようにしてみました。

  • 他ファイルのimport (ワイルドカードで指定も可能)
  • 変数の使用
  • ネストの使用
  • ベンダープレフィックスの自動付与
  • CSSの圧縮

オプションの指定に悩みましたが、こんな感じに指定できるようです。

今回は @import でディレクトリ全体なんかの指定が出来るワイルドカード(*)を使えるようにしてます。

実際に組んでみたものを以下にあげているので良かったら使ってみてください。

d-kusk/try-postcss

その他環境について

Atomの場合、言語パッケージが公開されていたので入れてみました。

language-postcss

拡張子が .pcss か SugarSSの .sss に対応するようです。

付けるなら前者かなぁ…と思っていたのですが、PostCSSによる変換後に .pcss の拡張子から .css に変換してくれないみたいなので、もし上記の使うならちょっと気持ち悪いけど gulp-rename 辺りのお世話になるのかな?

あんまりコレだって感じがしなかったのと、多くの人が変換対象のファイルの拡張子にcssを指定していたのでこのパッケージにはサヨナラしました。

触れてみて

バリバリプラグイン使って書いていくと読めなさそうなので、とりあえずprecssプラグイン + αである程度Sassっぽい書き方が出来るようにしておいて、徐々に導入していくのが良さそうな気がします。

あと、今後流行ってくるとオレオレ秘伝のCSS変換器があちこちにあるみたいな状況になりそうなので、ボイラープレートとして作って置いておく場合や複数人で使う場合は READMEやその他テキストに何が出来るのか書く というのはやって置いたほうが良さそうです。

オススメの資料

PostCSSに関しては以下のスライドが分かりやすかったのでオススメです。

PostCSS とは何か – SSSSLIDE