Twitter Bootstrap Sassポートの使い方とカスタマイズ
bootstrap-sassをインストール
Ruby on Railsではない環境でbootstrap-sassをインストールして、標準のbootstrapのCSSをカスタマイズを追加したcssをコンパイルしてみます。
ruby, sass, compassを利用可能な状態にする
Sass版のBootstrap3をインストールために、
- ruby
- sass
- compass
を使える環境にしておく。rubyのインストールは、Windows環境であれば、
を利用するのが簡単でおすすめです。rubyのインストールが終わったら、gemコマンドを利用して、sassとcompassをインストールすることが出来ます。
gem install sass
gem install compass
Bootstrapの公式Sassポート
Sass版BootstrapのGithubは以下のページです。
Twitter Bootstrap 3の公式ページにも
Official Sass port of Bootstrap
というページがありますが、非Rails環境でbootstrap-sassをインストールする場合は、Githubの
の項目にインストール方法が書いてあります。Windowsのコマンドプロンプトで、
gem install bootstrap-sass
bootstrap-sassをgemに追加した上で、
compass create my-new-project -r bootstrap-sass --using bootstrap
とすれば、現在のカレントディレクトリにmy-new-projectというフォルダが作成され、その中にstylesheetsフォルダやsassフォルダが作成され、sass版のbootstrapを利用した開発を開始できる状態になります。
今回は、
compass create -r bootstrap-sass --using bootstrap --css-dir "css" --images-dir "img" --javascripts-dir "js"
サイトのルートディレクトリに移動した上で、上のcompassコマンドを実行し、静的ファイルのフォルダ名を指定して実行しました。
gemの場所
gemコマンドを実行してbootstrap-sassをインストールしましたが、システムのどこにbootstrap-sassがインストールされたのか確認してみます。
インストールされているgemの一覧を確認するには、
gem list
でインストールされているgem名を確認できます。各gemのインストールパスを調べるには、
gem which bootstrap-sass
とすれば、インストールされている場所を知ることが可能です。今回の場合は、
C:/Ruby193/lib/ruby/gems/1.9.1/gems/bootstrap-sass-3.2.0.0/lib/bootstrap-sass.rb
と表示されました。上のパスに、SassのBootstrapがインストールされていることになります。
gemコマンドについての詳細は、
gem -h
で調べることが出来ます。
cssのカスタマイズ
bootstrap-sassを使ってカスタマイズされたcssをコンパイルするために、
- 変数
- @extend
を利用する。
変数の上書き
本記事で書いたやり方をすると、
sass/_bootstrap-variables.scss
上のファイルを調整することで、
- 色
- 幅
を変えることができる。以下の一行を変更した上で、
$brand-primary: #47CA42
cssをコンパイルする。
compass compile
変数の値を調整することで、標準のBootstrapをカスタマイズすることが可能。
@extendを利用したclassの追加とカスタマイズ
sassはcssをコンパイルするメタ言語なので、既存のbootstrapのスタイルに、
新しいclass名に割り当て
新規のスタイルの追加
することが、sassの@extendを利用することで可能。
sass/_bootstrap-customize.scss
というカスタマイズ用のファイルを作成し、
.my-col-md-4 {
@extend .col-md-4;
}
上のコードを追加する。
sass/styles.scss
に
@import "bootstrap-customize";
とした上で再度コンパイルすれば、
.my-col-md-4
というオリジナルのclass名を利用してグリッドレイアウトを組むことが出来る。そして、
.my-col-md-4 {
@extend .col-md-4;
background-color: #555;
}
上のようにスタイルを追加することで、Bootstrap標準のスタイルに対してカスタマイズしたスタイルを追加していくことが可能。
@extendを使うことで、bootstrapのsassコード本体に手を加えることなく、bootstrapをベースとしたコードの拡張が可能になる。