@znz blog

ZnZ の memo のようなもの

bootstrap-sass-railsからbootstrap-sassに移行した

| Comments

今日の bundle update は bootstrap の sass の gem を bootstrap 公式のものに移行したのが大きな変更点でした。

bootstrap-sass-rails から bootstrap-sass 3.1.0.2

bootstrap 3.1.0 がリリースされて少し時間が経ったので、 bootstrap-sass-rails を確認してみたところ、 DEPRECATION NOTICE に公式サポートされた sass の gem があるので、 そちらに移行を推奨と書かれていたので、移行しました。

bootstrap-sass gem への移行は UPGRADING に書かれているように @import "twitter/bootstrap";@import "bootstrap"; に書き換えるだけでした。

bootstrap-sass のカスタマイズ

Usage によると、一番単純な使い方としては @import "bootstrap"; だけですが、 Less variables を参考にして以下のようにカスタマイズして使うのが良いようです。

Less では変数の接頭辞は @ ですが、 sass では $ になることさえわかっていれば、最低限のカスタマイズは出来ると思います。

1
2
3
4
5
$navbar-default-bg: #312312;
$light-orange: #ff8c00;
$navbar-default-color: $light-orange;

@import "bootstrap";

bootstrap-sass-rails からの移行だったので、 bootstrap-custom.css.scss の内容は以下のようにしました。

1
2
3
4
$body-bg:               #fff;
$text-color:            lighten(#000, 20%);

@import "bootstrap";

もっと高度なカスタマイズをするなら、 cp $(bundle show bootstrap-sass)/vendor/assets/stylesheets/bootstrap.scss app/assets/stylesheets/bootstrap-custom.scss でコピーしたファイルを @import 'bootstrap'; の代わりに @import 'bootstrap-custom'; で使うことを想定しているようです。

Comments