CompassでBootstrapを使う覚え書き

1.Compassのインストール

Compass公式サイト

Rubyがインストールされている状態で以下のコマンドを実行
$ gem install compass

Compassがインストールされたか確認
$ compass -v

2.Bootstrap for Sassのインストール

Bootstrap公式サイト
GitHub:twbs/bootstrap-sass

bootstrap-sassのインストール
$ gem install bootstrap-sass

A.既存のCompassプロジェクトに適用する場合

config.rbに以下を追記

config.rb

require 'bootstrap-sass'

プロジェクトにBootstrapのインストール
$ compass install bootstrap

※先にconfig.rbに追記しないでインストールすると以下のエラーが表示される
No such framework: "bootstrap"

B.新規にCompassプロジェクトを作成する場合

通常のプロジェクト作成に以下のようにパラメータを追加して実行
$ compass create my-new-project -r bootstrap-sass --using bootstrap

3.BootstrapのSass用ファイル

Compassプロジェクトのsassディレクトリに以下のファイルが作成される

• styles.scss - Bootstrapをimportしているファイル
• _bootstrap-variables.scss - Bootstrapの変数一覧（ここ編集すると上書きされる）

4.Basic templateを書き換え

Bootstrap公式サイトにあるBasic templateは以下の部分を書き換える

<link href="css/bootstrap.min.css" rel="stylesheet">
<script src="js/bootstrap.min.js"></script>
↓
<link href="css/styles.css" rel="stylesheet">
<script src="js/bootstrap.js"></script>

（css、jsのディレクトリ名はプロジェクトの設定による）