昨年秋頃からAutoprefixerのIssue #37をチェックしていたのですが、2013年12月21日にAutoprefixer 1.0がリリースされ、Source Maps（ソースマップ）に対応しました。このバージョンアップにより、Sass 3.3.0等でコンパイルして出力したSource Mapsを読み込み、よしなに調整して出力してくれるようにもなり、「Autoprefixerを通すことでマッピングがずれてしまう」という問題は解消されました。
Autoprefixerの通し方はいくつかありますが、普段の業務で使うことを考えると、まず思いつくのはGruntを使う方法でしょうか。Gruntプラグインであるgrunt-autoprefixerがAutoprefixerに追従して2013年12月25日に0.6にバージョンアップし、Source Mapsに対応しました。編集の都度、CSSをAutoprefixerに通してブラウザで表示を確認することが容易に可能となります。
grunt-autoprefixerの設定方法
設定は簡単で、autoprefixerタスクのOptions内にmap: trueを指定するだけです。この設定で、AutoprefixerはSassが出力したSource Mapsを読み込み、それをベースにしたSource Mapsを出力してくれます。
autoprefixer:
options:
map: true
dist:
src: '../htdocs/common/css/basic.css'
sassやwatchタスクとの連携は、GitHubに置いているgenerator-skywardのGruntfile.coffeeをご覧下さい。
動作検証
CSSにベンダープリフィックスが付いたプロパティが並んでいますが、Chrome Developer Toolsで.btn-01 a:hoverの記述位置を見ると、Sassファイルの41行目に記述してあると表示されており、正しい位置が示されています。
※検証用に適当に書いたので、細かいことはツッコミなしでお願いしたく。この他にも、ベンダープリフィックスが不要なborder-radiusを、わざとベンダープリフィックス付きで書いたりしてテストをしました。
- Sass（.scss）ファイル
- コンパイル後Autoprefixerを通したCSS
- Chrome Developer Toolsの表示
この例だとSource Maps対応の効果が分かりにくいかもしれませんが、古いgrunt-autoprefixerと結果を比較してみるときっとお分かりいただけると思います。少しの記述でもわずかにマッピングがずれていきますので。
補足
Autoprefixerを使い始めてからは、ベンダープリフィックスを付けないでプロパティを記述し、Autoprefixerに必要に応じてベンダープリフィックスを付けてもらう方式をとっています。Compassのミックスインは古いので...。
Sass 3.3.0はまだ正式にリリースされていないため、gem install sass --preでインストールします。
Autoprefixerをご存じない方は、2013年末にスライドの研究・練習で書いた「Autoprefixerの紹介」（草稿）や、Autoprefixer ― CSSのベンダー接頭辞をいろいろする - fragmentaryを参考にしてみて下さい。
ちなみに、以前からSource Mapsを出力しているのですが、Chrome Developer ToolsでSassファイルの行数を見たことがほとんどなく...。大規模なサイトだと役立つ日が来るのでしょうか。