twitter bootstrap-sassをcompassで使うまでのお話

CSSの設計とかもうやりたくないって思うことってありますよね。すでに世の中にはtwiiter bootstrapやらYUI pureやら優秀なUI-Kitがたくさんあります。今さらオレオレ設計するなんて嫌になっちゃいます。僕はもうすでに嫌です。

そんな感じで案件にbootstrapを使ってみたいけど導入がよくわからんってことで導入までを書いてみます。

Gemfileをつくる

Sass/Compass/bootstrap はgemでインストールします。そのgemをまとめてインストールするためにGemfileをつくります。

エディタで./Gemfileを新規で開きます。

% vim Gemfile

中身はこんな感じです。

source 'https://rubygems.org'

gem 'sass'
gem 'compass'
gem 'bootstrap-sass'

bundlerセットアップ

Gemfileができたらbundle installコマンドでインストールします。このコマンドはgemをまとめてインストールしてくれます。 bundle installを使えるようにするためにbundlerをインストールしましょう。

% gem install bundler --no-rdoc --no-ri

bundle installgemをインストールする

bundlerがインストールされたらbundle installしてみましょう。

% bundle install

これでまとめてインストールされます。

Compassプロジェクトをbootstrapが使える状態で初期化する

Compassプロジェクトをbootstrapが使える状態で初期化してみましょう。

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

Compassプロジェクトが初期化されました。こんなディレクトリになってると思います。

Gemfile
Gemfile.lock
config.rb
css
js
sass

scssファイルをコンパイルしてみる

Compassコマンドでscssファイルをコンパイルしてみましょう。

% compass compile

コンパイルが通れば環境の完成です!

scssを編集してみる

あとはガシガシscssを書いてみましょう。追記だったりオーバーライドであればsass/styles.scssを編集すればおkです。

% vim sass/styles.scss

単純なbootstrapのカスタマイズであればsass/_bootstrap-variables.scssを編集しましょう。

% vim sass/_bootstrap-variables.scss

編集したあとはコンパイルしてみましょう。

% compass compile

コンパイルが通れば完成です!これでCompassでbootstrapが使えるようになりましたね!

お疲れ様でした!