Twitter Bootstrapにcompass, Sassy Buttons, zurui-sass-railsを追加する手順。

ruby on rails Sass Compass

今週に入ってガリガリとHTMLとCSSを書く事がありました。
折角、Railsでシステムを開発しているという事もあるので、効率良くCSSを書く方法を調べてみました。

調査結果

  • Twitter Bootstrapの色味を変えるだけでそこそこのデザインが出来る。
  • SCSSよりSASSがイケてる。
  • SASSを使うならcompassを使うと効率的にSASSを扱える。
  • Sassy Buttonsを使えばTwitter Bootstrapぽいボタンの色違いが簡単に作成出来る。
  • zurui-sass-railsを使えばズルイデザインが出来る。

上記の事が分かったが、Twitter BootstrapはLESSで構築されていて、SASSやらcompassやらを同時にprecompile出来るのか分からなかったので、実際に実装してみました。

実際にやってみた

Railsのバージョンは3.2.9。

group :assetsに下記を追加

  gem 'less-rails'
  gem 'therubyracer', :platforms => :ruby
  gem 'twitter-bootstrap-rails'
  gem 'compass-rails'
  gem 'sassy-buttons'
  gem 'zurui-sass-rails'

gemインストール

bundle install

Twitter Bootstrapのインストール

rails g bootstrap:layout application fluid
rails g bootstrap:install

compassのインストール

bundle exec compass init --syntax sass

Sassy Buttonsのインストール

bundle exec compass install sassy-buttons


後は適当にxxx.css.sassを作成

@import compass/utilities
@import compass/css3
@import sassy-buttons
@import zurui-sass
  
.example
  +zurui-box-inner
  height: 200px
  width: 100%
  .content, .sidebar
    padding: 20px
  .content
    +box-flex(4)
  .sidebar
    +box-flex(1)
    margin-right: 1px 

.sassy-button
  +sassy-button("simple", 5px, 1.1em, #ffd71a, #ffaa1a)

viewを作成して動作が確認出来ました。

まとめ

sprocketsの機能でapplication.css記述されていればLESS、SCSS、SASSなんでもCSSにしてくれて便利。
Twitter BootstrapのSASS版もあるが、なるべく本家のアップデートに合わせたいのでLESSで良いという考えです。


[PR]Spreeの情報を集めています。

ECを持ちたい方、仕事でECを使いたい方向けのコミュニティサイトです。
このサイトでは世界で最も使用されているECの1つであるSpreeについての情報を提供しています。
http://spreecommerce.jp/