あかんわ

ブログで日誌でも書くようにすれば多少はやる気が出るかと思ったんです

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

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

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

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

Gemfilebootsteap-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

開発環境

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