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

2016.9.26

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

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

PostCSSって？

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

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

プラグインについて

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

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

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

postcss/plugins.md at master · postcss/postcss

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

gulpでタスクを組んで見る

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

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

var gulp       = require('gulp');
var postCss    = require('gulp-postcss');

gulp.task('css', function() {
  gulp.src([
      'source/pcss/*.css',
      '!source/pcss/_*.css'
    ])
    .pipe(postCss([
      require('postcss-easy-import')({
        glob: true
      }),
      require('postcss-simple-vars'),
      require('postcss-nested'),
      require('autoprefixer'),
      require('cssnano')
    ]))
    .pipe(gulp.dest('dest/css/'));
});

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

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

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

d-kusk/try-postcss