一分一秒真剣勝負！

Ruby, Railsなど。Web系の技術ネタを充実させたい・・が、そうなるかは分からない。

トップ > tech > Rails + Sass + Compass環境でTwitterBootstrapのvariablesを変更する

Rails + Sass + Compass環境でTwitterBootstrapのvariablesを変更する

tech bootstrap rails

【注意】この情報古いっす。bootstrap-sassのgithub見てください。もっと簡単にできます。

bootstrapの公式サイトには Customize variablesというページがあって、これを変更する事によって色などを変更したbootstrapをダウンロードできます。これをRailsで変更したいという時にどうするか。

環境は、Railsが3.1.12で、gemは bootstrap-sass, compass-railsを使用しているものとします。

bootstrap-sassではこのファイルで全てのvariablesが宣言されているので、これを上書きしえてしまえばいいわけです。

ファイル構成

以下の様な構成でファイルを作成します。

app/assets/stylesheets/
├── application.css.scss
├── bootstrap
│   └── _variables.scss # variablesを定義する場所
├── bootstrap_load.css.scss # bootstrap読み込み用
└── layout.css.scss # 独自の定義など

各ファイルの内容

app/assets/stylesheets/bootstrap/_variables.scss

$tableBackground: #fff;  // 例えば@tableBackgroundを上書きしたいならこんな感じ。

app/assets/stylesheets/application.css.scss

@import "compass";

app/assets/stylesheets/bootstrap_load.css.scss

@import "bootstrap/variables"; // _variables.scssで変数を上書きしている
@import "bootstrap";           
@import "bootstrap-responsive";

app/assets/stylesheets/layout.css.scss

// 独自に定義したスタイルを書く

大体こんな感じ。app/assets/stylesheets/bootstrap/_variables.scssはsass-railsと同じディレクトリ構成にしておいた方が分かりやすくていいかなと思ってこうやってます。bootstrap-sassが推奨のテンプレをgenerateしてくれるといいんだけどなあ。