Twitter Bootstrapにcompass, Sassy Buttons, zurui-sass-railsを追加する手順。
今週に入ってガリガリと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/