次世代CSS登場!PostCSSの簡単な使い方

Pocket

postcssの使い方

最近のWeb制作の現場では、ふわっとした自然な動きのアニメーションやSMACSSのようなスタイルの概念、スタイルのコンポーネント化など、PSDをそのままCSS化すればいいという時代ではなくなってきていますね。

レスポンシブデザインなどに対応するため、すでにBootstrapやSASSのようなpre-processorを採用されているところも多いと思いますが、ここにきてPostCSSというヤツが注目されています。

今回は次世代CSS!になるかもしれない、PostCSSの使い方を紹介します。

PostCSSって何?

PostCSSはjavascriptを使ってCSSスタイルを変換する、CSS Processor。javascriptはプラグインとして既に数多く公開されており、変数やミックスイン、カスタムセレクターなど様々な機能があります。

また、関数を使う場合を除きCSSからかけ離れた特殊な記述方法は必要なく、すでにSASSやLESSを使用しているひとは移行しやすいのが特徴。詳細な情報はGithubのページで公開されています。
postcssって何?

SASSやLESSとPostCSSの違い

基本的にはSASSやLESSのようなpre-processorと同じように使用できます。大きな違いはそのスピード。なんと3〜30倍の違いがあるそうです。

実際こちらのサイトでは、5つのプロパティを入れた1万のセレクタを変換する速度をSASSとPostCSSで比べたところ、34倍の差が出たとのこと。
postcssは早い

たしかに、Bootstrapの本体をLESSファイルからCSSに変換するとかなり長い時間かかります。スタイルの量が多ければ多いほど効果を発揮してくれそうですね。

また、スピード以外にもプラグインで必要な機能を追加することで、SASSにはない便利な使い方もできるようです。

PostCSSの使い方

ここからは実際にインストールからPostCSSの使い方までを確認してみます。今回はGruntを使ったPostCSSのセットアップ方法を紹介します。Gruntの他にGulpやStylusでも使えるようです。

Gruntのインストール

セットアップはとくに難しいことはなく、ターミナルでコマンド打ち込むだけ。プロジェクトファイルにGruntをインストールする必要があるので、まずはGruntを用意しておきます。

Gruntのインストールはここでは省略しますが、公式ページこちらのページが参考になります。
PostCSSをGruntで使う方法

PostCSSをGruntに入れる

Gruntの準備ができたら、次はPostCSSを入れてみます。と言ってもインストールはすごく簡単。PostCSSのGruntページにインストール方法が書かれているのでそのままやればOKです。

まずは本体のインストール。

npm install grunt-postcss --save-dev

そのあと有効化するために必要なコードをGruntfile.jsに記述。

grunt.loadNpmTasks('grunt-postcss');

ここではstyle.cssが出力さるように設定してみます。また、optionsオブジェクトにPostCSSのプラグインを読み込むための配列もセットしておきます。Gruntfile.jsの中身はこんな感じ。

module.exports = function(grunt) {

  grunt.initConfig({
    postcss: {
      options: {
        processors: [
        ]
      },
      dist: {
        src: 'css/style.css',
        dest: 'dist/css/style.css'
      }
    }
  });

  grunt.loadNpmTasks('grunt-postcss');

  grunt.registerTask('default', ['postcss']);
};

PostCSSを使ってみる

ここまでで準備が完了したので、実際に使ってみます。ターミナルからタスクを実行するとdist/css/style.cssが出力されるはずです。

grunt postcss

PostCSSをGruntのタスクで実行

PostCSSにプラグインをインストールする

問題なく実行できたら次はプラグインのインストールをやってみます。このままだとただファイルを出力するだけですが、プラグインを入れることで様々な機能を追加できるのです。

ここでは以下の3つのプラグインをインストールしてみます。

npm install autoprefixer --save-dev
npm install cssnext --save-dev
npm install precess --save-dev

インストールしただけでは使えないので、先ほどのprocessors配列に配置します。

module.exports = function(grunt) {

  grunt.initConfig({
    postcss: {
      options: {
        processors: [
          require('autoprefixer')(),
          require('cssnext')(),
          require('precss')()
        ]
      },
      dist: {
        src: 'css/style.css',
        dest: 'dist/css/style.css'
      }
    }
  });

  grunt.loadNpmTasks('grunt-postcss');

  grunt.registerTask('default', ['postcss']);
};

PostCSSのプラグインはこのように、processors配列に読み込むことで使用可能になります。それぞれのプラグインの効果を確認するため、style.cssに以下のようなスタイルを記述してみましょう。

/* autoprefixerのテスト */
 
.autoprefixer {
  display: flex;
}
 
/* cssnextのテスト */
 
.cssnext {
  background: color(red alpha(-10%));
}
 
/* precssのテスト */
 
.precss {
  @if 3 < 5 {
    background: green;
  }
  @else {
    background: blue;
  }
}

うまくいけば結果はこのようになります。

/* autoprefixerのテスト */

.autoprefixer {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}

/* cssnextのテスト */

.cssnext {
  background: #FF0000;
  background: rgba(255, 0, 0, 0.9);
}

/* precssのテスト */

.precss {
  background: green
}

ちなみに上記のプラグインを簡単に説明するとこんな感じ。

  • autoprefixer: その名前の通り、自動的にvendorprefixを追加してくれるプラグイン
  • cssnext: カスタムセレクタや細かなカラー設定ができるプラグイン
  • precss: SASSのような記述が可能になるプラグイン

プラグインはこの他にもたくさん公開されているので、Githubのページでチェックしてみてください。

まとめ

PostCSSは非常に高速で、プラグインによる機能の追加など今後の状況によってはSASSやLESSに変わる新しいCSS-プロセッサーになりそうです。また、SASS風に書けるので、記述方法が大きく変わってしまうこともなく、移行しやすいのがメリット。

この記事で使ったプラグインは3つだけですが、他にも便利なプラグインがたくさんあります。あとはCodekitがPostCSSに対応してくれれば使ってみるのもありかな〜という感じですね。