課題：sassのコンパイルが遅い
Railsのプロジェクトで、css(scss)を修正するたびにコンパイルが行われて非常に遅くて辛い思いをしていました。基本的にはChromeのデベロッパーツール側で入力して試してから反映しているので、間違うことは基本的にはないのですが、bootstrap-sassを使ったgridの幅の計算や、sassの計算を使うような処理の場合は試行錯誤するので困ります。
今では1回のコンパイルに25秒近くかかるようになっていました。
検討:sassc-railsを使いたい
okayama-jsで発表するためにJS周りでのsassを調査しているときに、libsassの存在を知りました。これをrailsでも使えたらいいのではないか？と思い、調査してみたところ、sassc-railsというgemがあることがわかりました。これを使えないか調査してみました。
さらなる課題:compassが使えない
libsassだとcompassが使えないという情報を見ました。確かに、compass-railsを使っていると、scssのコンパイルでこけてしまいました。compassで使っている処理がruby-sassに依存したものになっているからのようです。
解決:compass-mixinを導入
さらに調査したところ、compass-mixinがあるよという記事を見かけました。これをプロジェクトに置き、@import "compass";文で指定していたところを、compass-mixinのものに変えればよさそうです。
実際の作業内容
libsassのインストール
libsassがまだ入ってない場合は入れておきます。
私の環境はMacなので、homebrew経由でインストールしました。
brew install libsass
Gemfileの変更
次に、RailsプロジェクトのGemfileの変更です。sassc-railsを追加して、sass-railsとcompass-railsを削除します。
# 以下の2行は削除
# gem 'sass-rails'
# gem 'compass-rails'
gem 'sassc-rails' # 追加
そして、bundle installしておきます。
config/environments/development.rb の編集
sassc-railsのreadmeに書いてありますが、sourcemapを作るために、以下を追記しておきます。
config.sass.inline_source_maps = true
compass-mixinの導入
次に、compass-mixinを導入します。
今回は、compass-mixinをzipで落としてきてvendorディレクトリに設置しています。
npmを使っている場合はnpm install compass-mixinとかでできるかもしれません（未検証）。
github: Igosuki/compass-mixins にアクセスして、ブランチのところからタグの0.12.10を選んでzipでダウンロードして、vendor/assets/stylesheets以下に置きました。
解凍後のフォルダにはバージョン名が付いているので、その部分は削除します。
application.scssの編集
あとは、compassの読込をcompass-mixinsのほうに向けます。
// 以下の1行を削除
// @import "compass";
// 追加
@import "compass-mixins/lib/compass";
// 他にcompassのアニメーションなどを使っている場合は追加
@import "compass-mixins/lib/animation/core";
これで終わりです。
測定:本当に4倍速かった
一応、ベンチマークをとりました。
やったのは、ベンチマークする度にとあるクラスのpadding-topの値を1ずつ上げていく、というものです。
| sass-rails & compass-rails | sassc-rails & compass-mixin | |
|---|---|---|
| 1回目 | 24933 ms | 6349 ms |
| 2回目 | 25854 ms | 6455 ms |
| 3回目 | 24828 ms | 6471 ms |
| 4回目 | 24551 ms | 6391 ms |
| 5回目 | 24070 ms | 6276 ms |
25秒近くかかっていたsassのコンパイルが6.4秒程度になりました！
sassc-railsのページに４倍速いと書かれていましたが、確かに4倍近く速くなってます。
これならまだ耐えられる気がします。
まとめ
sassc-railsは確かに速い！
しかし、libsassは最新のsassの機能が全て使えるわけではない点に注意が必要です。
最新機能に依存していないのだったら、sassc-railsに移行するのはありだと思います。