Autoprefixer：Web Essentials で自動的にベンダープレフィックスを追加する方法

Sassファイルを編集したら、-webkit-、-moz-などの必要なベンダープレフィックスを自動的に追加して .css を生成する方法です。
スタック・オーバーフローで教えてもらいました。

div {
  transition: 1s;
}

と書いたら、自動的にベンダープレフィックスを付与して、cssの出力は

div {
  -webkit-transition: 1s;
  -moz-transition: 1s;
  -o-transition: 1s;
  transition: 1s; 
}

となるようにしたい。

ツール > オプション > Web Essentials > CSS > Autoprefixer > Enable Autoprefixer
をTrueに変更。
f:id:jirolabo:20141227142152p:plain

こうすると、

div {
  -webkit-transition: 1s;
          transition: 1s; }

このような出力になります。

あれ？
-moz-とか、-o-が無いですね。

各ブラウザの最新のcss対応状況にしたがって、必要なベンダープレフィックスのみを追加してくれる仕様*1のようです。
これは、先ほどのWeb Essentiasのオプション > Targeted Browsers で設定変更が可能です。
例えば、

last 20 versions

を指定すると、以下のように出力されました。

div {
  -webkit-transition: 1s;
     -moz-transition: 1s;
       -o-transition: 1s;
          transition: 1s; }

設定方法の詳細については、こちら*2を見てみてください。

Jiro Laboratory