Codekit 2でAutoprefixerを有効にする

CSSプリプロセッサを利用して随分たった。最初の頃に助けられたGUIのCodekitも2014年のはじめには2になっていた。Grunt使ったりしていて離れていたのだが、インターンに来ていたらRashaadはじめ、他のデザイナーさんと共有することがあってCodekitに戻ってきつつある。

環境を整備しようと調べたところ、見落としていた設定があった。 設定だけさっさと知りたい方は下記のURLへ。

Using Codekit 2 Autoprefixer With Compass

Codekit 2.0からAutoprefixerをサポート

Autoprefixerはその名の通りブラウザのベンダープレフィックスをコンパイル時に自動で添削してくれるツール。Codekitは2.0からサポートされた。

Compassを利用しているとborder-radiusなど、早くからサポートされていったプロパティも几帳面につけてくれる。experimental-supportの挙動を制御する変数を変更するのもいいけれど、都度メンテナンスが必要になってしまう。ということでAutoprefixserの登場となるわけです。

設定方法

設定は簡単。

プロジェクトのコンフィグ画面（歯車アイコンをクリック）から、Languages > Special Languages Tool にある「Run Autoprefixer after compiling Less, Sass & Stylus files」にチェックするだけ。

結果

あとは試しにコンパイルして確かめてみましょう。 例えば下記のborder-radiusの指定。

div{  
  @include border-radius(8px);
}

Autoprefixer無しだと付与してしまったベンダープレフィックスがすっきりなくなったことが確認できる。

Before

div{  
  -moz-border-radius: 8px;
  -webkit-border-radius: 8px;
  border-radius: 8px;
}

After

div{  
  border-radius: 8px;
}

以上、業務連絡でした。