RailsでSassを使ってBootstrapのコンポーネントをカスタマイズする

RailsアプリのメインページにBootstrapのCSSコンポーネント*1Jumbotronを設置しようとして、背景色をデフォルトのグレーから変えたくなったので方法を調べました。

ちょっとググればわかる程度の内容ですが、Sassの@extendに感心したので書き留めておきます。

Gemfile

gem 'rails'
# BootstrapでSassを使うgem
gem 'bootstrap-sass'
# railsでSassを使うgem
gem 'sass-rails'

Gemfileにbootsteap-sassを追加します。
rails newで作成されたGemfileであれば、sass-railsは最初から記述されていると思いますが、無い場合は記述します。
gemのバージョンは、とりあえず最新版でいいと思いますが、エラーが出た場合はエラー出力をコピペしてググって解決します。

custom.css.sass

@import "bootstrap"; 

/* extend bootstrap component */
/* 背景色が赤いjumbotronを作る */
.jumbotron-red {
  @extend .jumbotron !optional;
  background-color: #ED5565;    /* GRAPEFRUIT */
  h1 {
    color: white;
  }
  h2 {
    color: #F5F7FA;   /* LIGHT GRAY */
  }
}

app/assets/stylesheetsディレクトリにcustom.css.sassファイルを作成して、Sass構文でカスタム内容を記述します。
今回は、Bootflatのような色彩の、赤いjumbotronを作ってみたかったので、.jumbotron-redクラスを作成して@extend .jumbotronしました。
また、@extendに!optionalフラグを付けて、継承元であるjumbotronがBootstrapから削除されても対応できるようにしています。

参考記事

Sass: Syntactically Awesome Style Sheets
Twitter Bootstrap のカスタマイズをライブラリ本体に手を入れずに行う | EasyRamble
github.com
bootflat.github.io

開発環境

• OSX 10.11.4 El Capitan
  - パッケージマネージャ： Homebrew
• Ruby 2.3.0
  - バージョンマネージャ： rbenv
  - Webフレームワーク： Ruby on Rails
  - CSSフレームワーク： Bootstrap

*1:楽に使いまわせるCSSのクラス