Edited at

CompassでTwitter Bootstrapの見た目をカスタマイズ

More than 5 years have passed since last update.

Twitter Bootstrapをダウンロードして使っていたけどやっぱりカスタマイズしたくなった。それもCompass使ってSassで管理したい。


前提



  • Compass使うのでRubyが必要 (Rubyのセットアップは割愛)

  • 使うアプリケーションのフレームワークに依存せず単独で使う(Ruby以外のプロジェクトでも使う)

  • カスタマイズはcssのみ、javascriptは対象外


Sass版を探す

github.com/twitter/bootstrapはLessファイルで公開されているのでSassにしてくれてる人を探す。

Compass or Twitter Bootstrap? Why Not Bothより

を知る。他にもありそうだけどとりあえず☆の多いマクドナルドさんの方(以後bootstrap-sassと表記)を使う。


環境セットアップ

Compassとbootstrap-sassをインストールする。

gem install compass

gem install bootstrap-sass

rbenvを使っている場合はcompassコマンドを使うためにrbenv rehashしておく


Compassプロジェクトのセットアップ

ディレクトリをTwittter Bootstrapのビルドに合わせる。以下の例はカレントディレクトリに作成する例。

compass create . -r bootstrap-sass --using bootstrap --css-dir css --images-dir img --javascripts-dir js

Compass作成済みのプロジェクトに追加する場合、以下のコマンドで追加することもできる。

compass install bootstrap

--sass-dirも指定できるのでプロジェクトファイルと出力ファイルを分けることも可能。例えば以下のような感じ。

mkdir sass

cd sass
compass create . -r bootstrap-sass --using bootstrap --sass-dir . --css-dir ../web/css --images-dir ../web/img --javascripts-dir ../web/js

デフォルトだと*-dirの値が使われるのでconfig.rb内でhttp_*_pathを指定しておく。


config.rb

http_stylesheets_path = "/css"

http_images_path = "/img"
http_javascripts_path = "/js"


Twitter Bootstrapのカスタマイズ

bootstrap-sassでは変数が http://getbootstrap.com/2.3.2/customize.html#variables と同じ名前で定義されている。ありがたい。従って、例えば背景を黒にするにはbodyBackground変数を使って以下のように書ける。


styles.sass

$bodyBackground: black;

@import "bootstrap";

( v3から変数名のコーディングルールが変わっているので注意。$bodyBackground$body-bg など )


ブラウザから確認

compass watchでプロジェクトのディレクトリを指定すればsassファイルの変更を監視してcssファイルを作成してくれる。

compass watch <dir>

bootstrap-sassのデフォルトでは styles.css が出力ファイルになるのでそれをhtml側で指定すればいい。


Javascript

Compass単体だとどうにもならないのでとりあえずTwitter Bootstrapビルド済みのbootstrap.min.jsをそのまま使っている。

bowerでインストールして、Sprocketsをコマンドラインで叩くことを模索中。