Railsはライブラリのsprocketsのお陰で、LESS/SCSS/SASSが混在していてもよしなにCSSに変換してくれるそうです。ということで、Rails + Bootstrap環境に今まで気になっていたCompass, Zurui-design, Sassy-Buttonsを導入してみました！

Compassとは？

Sassをさらに強化してくれる便利なmixin群、スプライト自動作成、プロジェクトごとに設定ファイルを適用などがセットになったフレームワークです。
CompassについてはCSSの常識が変わる！「Compass」、基礎から応用まで！ | 株式会社LIGにすごく丁寧な説明があります。
また、英語ですがCompassの公式ページもデモがあって概要をつかみやすいです。

Zurui-Designとは？

Zurui-Designとは、sassでのカッコイイmixinが使えるようになる仕組みです。
ちなみに、ズルいデザインについてはこちらのスライドがわかりやすいと思います。
zurui-sass-railsについては、こちらのブログ記事がわかりやすいです。

Sassy-Buttonsとは？

sassy-buttonsは下のようグラデーションの効いたキレイなボタンを簡単に作成できる仕組みです。
英語ですが、公式サイトが一番雰囲気をつかみやすいです。

Gemのインストール

いつもどおりGemfileに以下を追加して、bundle installを実行してください。

1
2
3
4
5
6
7
8

# Bootstrap/Compress/Sassy-Buttons/Zurui-design
gem 'less-rails'
gem 'less-rails-bootstrap'
gem 'sass-rails'
gem 'compass-colors'
gem 'compass-rails'
gem 'sassy-buttons'
gem 'zurui-sass-rails'

Twitter Bootstrapのインストール

Twitter Bootstrapのインストール。application.html.hamlが作成されるので、application.html.erbを削除。

1
2
3

rails g bootstrap:layout application fluid
rails g bootstrap:install
rm -rf app/views/layouts/application.html.erb

Compassのインストール

Compassのインストールはこちら。

1

bundle exec compass init --syntax sass

Sassy-Buttonsのインストール

Compassのインストールはこちら。

1

bundle exec compass install sassy-buttons

もしNo such framework: "sassy-buttons"が発生するようなら、補足をご覧下さい。

使い方

xxx.css.sassファイルに次のようなコードを書けばCompass, Zurui-design, Sassy-Buttonsを使えます。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

@import "compass/utilities"
@import "compass/css3"
@import "sassy-buttons"
@import "zurui-sass"

// Compass
.compass-box
  +display-box
  +box-orient(horizontal)
  +box-align(stretch)
  +box-direction(reverse)
  height: 200px
  width: 100%
  .content, .sidebar
    padding: 20px
  .content
    +box-flex(4)
    background-color: #C5C1B4
  .sidebar
    +box-flex(1)
    background-color: #375F99
    margin-right: 1px

// Sassy-Buttons
.sassy-button
  +sassy-button("shiny", 15px, 26px, #ffd71a, #ffaa1a)

// Zurui-design
.zurui-box
  +zurui-box-deboss

補足: No such framework: “sassy-buttons”が発生する場合

Sassy-Buttonsの公式のインストール方法では、次のコマンドを実行する必要があるっぽです。

1

compass install sassy-buttons

ですがなぜか僕の環境では、No such framework: "sassy-buttons"となってしまいました。ただ上のエラーが出ていてもSassy-Buttonsを動かせました。 一応現在、GitHubで質問中です。回答を貰えたら記事を修正します。

Special Thanks

Twitter Bootstrapにcompass, Sassy Buttons, zurui-sass-railsを追加する手順。 - @camelmasaの開発日記