Compass で Autoprefixer を使う

Autoprefixer という名前からして便利そうなやつを使えるようにしました！前回できなかったのでリベンジ成功だヽ(・ω・)ﾉ

Parse CSS and add vendor prefixes to CSS rules using values from Can I Use.

ai/autoprefixer

なるほどっ！Can I Use… の情報を見てベンダープレフィックスを追加してくれるのか。

Autoprefixer のインストール

If you use Compass binary to compile your styles, you can easily integrate Autoprefixer with it. Install autoprefixer-rails gem

ai/autoprefixer

$ sudo gem install autoprefixer-rails

かんたん。

Compass の設定

and add post-compile hook to config.rb

ai/autoprefixer

require 'autoprefixer-rails'

on_stylesheet_saved do |file|
  css = File.read(file)
  File.open(file, 'w') do |io|
    io << AutoprefixerRails.process(css)
  end
end

プロジェクト毎に config.rb に記述する。

対象ブラウザを指定

You can set the browsers option as the second argument in process method

ai/autoprefixer

config.rb に記述した中にある io 〜 の行をこんなかんじに書き換える。

io << AutoprefixerRails.process(css, browsers: ["last 1 version", "< 1%", "ie 7"])

ブラウザの指定方法はこちら。Autoprefixer がデフォルトで指定している内容は以下。

< 1%, last 2 versions, Firefox ESR, Opera 12.1

使う！

あとは普通に Compass でコンパイルしたら必要なベンダープレフィックスが付与されたり、余計なベンダープレフィックスを削除してくれるってわけさー！便利ですね。