search
LoginSignup
28

More than 5 years have passed since last update.

posted at

updated at

sassc-railsでsassのコンパイルを高速化

課題: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-railscompass-railsを削除します。

Gemfile
# 以下の2行は削除
# gem 'sass-rails'
# gem 'compass-rails'
gem 'sassc-rails' # 追加

そして、bundle installしておきます。

config/environments/development.rb の編集

sassc-railsのreadmeに書いてありますが、sourcemapを作るために、以下を追記しておきます。

development.rb
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倍速いと書かれていましたが、確かに4倍近く速くなってます。
これならまだ耐えられる気がします。

まとめ

sassc-railsは確かに速い!
しかし、libsassは最新のsassの機能が全て使えるわけではない点に注意が必要です。
最新機能に依存していないのだったら、sassc-railsに移行するのはありだと思います。

参考URL

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
What you can do with signing up
28