全部はいらないよね？bootstrap-sassをカスタマイズして使う方法


![Bootstrap](https://31.media.tumblr.com/852ee4fd8bb0fd6e6c9d3aab0c884909/tumblr_inline_netdbbqehv1smsp17.png)


29日に人生初の胃カメラをしてきます、デザイナーの紺谷です。


さて、うちの会社は基本Ruby on Railsを使っていて、
フロント側だとコーディング作業効率化のために
最近では[Bootstrap](http://getbootstrap.com/)を使うようにしています。


もう有名すぎて何を今更って感じでしょうが、
Bootstrapが使えるGemに、
bootstrap-sassっていうのがあって、
これをカスタマイズして使う方法について
今回は紹介したいと思います。

※今回はRuby on Railsでの使い方に限って解説します


##インストール
以下の2行を `Gemfile` に記述してください。

```
gem 'bootstrap-sass'
gem 'sass-rails'
```

（sass-railsはデフォルトで書いてあることもあるのでいらないかも）
これだけでもいいのですが、自動でベンダープレフィックス
を追加してくれる以下のGemも追加しておくとなお良し。

```
gem 'autoprefixer-rails'
```

で、bundle install。


次に、 `app/assets/stylesheets/` の中にある
`application.css` を `application.css.scss` に名前を変更してから
以下の2行を追加。

```
@import "bootstrap-sprockets";
@import "bootstrap";
```

`bootstrap-sprockets` は必ず `bootstrap` の上に書いてください。


jsのコンポーネントも使うので
`app/assets/javascripts/application.js` に以下を追加。

```
//= require bootstrap-sprockets
```

これで完了。


Bootstrap自体の詳しい使い方に関しては
[http://getbootstrap.com/](http://getbootstrap.com/)
こちらのサイトを参照してください。


##カスタマイズ方法
コーダーにとってbootstrap-sassの厄介なところは、
BootstrapのCSSやjavascriptが `app/assets` の中に
直接入るわけじゃないってこと。
実際のファイルはどこかしら奥深くに置いていらっしゃる。
なので編集しようにも毎回そいつらを開くのもめんどくさい。


しかも、Bootstrapって結構機能（コンポーネント？）が多い。
ぶっちゃけこんなにいらないよね、ってなります。
全部は使わないよね、と。


そんなとき、`/app/assets/stylesheets/` の直下に
`_bootstrap-custom.scss`ってファイル作ってください。

中身は以下をまるまるコピペ。

```
// Core variables and mixins
@import "bootstrap/variables";
@import "bootstrap/mixins";

// Reset and dependencies
@import "bootstrap/normalize";
@import "bootstrap/print";
@import "bootstrap/glyphicons";

// Core CSS
@import "bootstrap/scaffolding";
@import "bootstrap/type";
@import "bootstrap/code";
@import "bootstrap/grid";
@import "bootstrap/tables";
@import "bootstrap/forms";
@import "bootstrap/buttons";

// Components
@import "bootstrap/component-animations";
@import "bootstrap/dropdowns";
@import "bootstrap/button-groups";
@import "bootstrap/input-groups";
@import "bootstrap/navs";
@import "bootstrap/navbar";
@import "bootstrap/breadcrumbs";
@import "bootstrap/pagination";
@import "bootstrap/pager";
@import "bootstrap/labels";
@import "bootstrap/badges";
@import "bootstrap/jumbotron";
@import "bootstrap/thumbnails";
@import "bootstrap/alerts";
@import "bootstrap/progress-bars";
@import "bootstrap/media";
@import "bootstrap/list-group";
@import "bootstrap/panels";
@import "bootstrap/responsive-embed";
@import "bootstrap/wells";
@import "bootstrap/close";

// Components w/ JavaScript
@import "bootstrap/modals";
@import "bootstrap/tooltip";
@import "bootstrap/popovers";
@import "bootstrap/carousel";

// Utility classes
@import "bootstrap/utilities";
@import "bootstrap/responsive-utilities";
```

で、`application.css.scss` の以下の1行を、

```
@import "bootstrap";
```

以下のように書き換える。

```
@import "bootstrap-custom";
```

あとは、`bootstrap-custom.css.scss` の中の、
使わないコンポーネントをコメントアウトまたは削除
すればそのコンポーネントだけ読み込まれなくなります。


jsに関しても、同じ感じです。
`/app/assets/javascripts/` 直下に

```
bootstrap-sprockets-custom.js
```

ってファイル作ります。
中身は以下コピペ。

```
//= require bootstrap/affix
//= require bootstrap/alert
//= require bootstrap/button
//= require bootstrap/carousel
//= require bootstrap/collapse
//= require bootstrap/dropdown
//= require bootstrap/tab
//= require bootstrap/transition
//= require bootstrap/scrollspy
//= require bootstrap/modal
//= require bootstrap/tooltip
//= require bootstrap/popover
```

で、`application.js` の以下の1行を、

```
//= require bootstrap-sprockets
```

以下に書き換える。

```
//= require bootstrap-sprockets-custom
```

あとは、`bootstrap-sprockets-custom.js` の中の
使わないコンポーネントをコメントアウトまたは削除。


以上！


##おまけ
Bootstrapの中で1つだけ気に喰わないのが、
PrimaryとかWarningとかの名前付け。
使用用途を明確にあらわしてくれているのは
ありがたいんだけど、直感的にどんな表示になるのか
わかりずらい。


なので、これはあくまで個人的なやり方なんだけど、
`/app/assets/stylesheets/` 直下に、`bootstrap-custom` ってフォルダ作って、
その中に `_variables.scss` ってファイルを作る。


中身は[ココ](https://github.com/twbs/bootstrap-sass/blob/master/assets/stylesheets/bootstrap/_variables.scss)のコピペ。


このファイルにサイトで使う色を以下のように設定する。

```
$blue: #3677a3;
$blue-shade-2: shade($blue, 40);
$blue-shade-1: shade($blue, 20);
$blue-tint-1: tint($blue, 20);
$blue-tint-2: tint($blue, 40);
$blue-tint-3: tint($blue, 60);

$green: #31947c;
$green-shade-2: shade($green, 40);
$green-shade-1: shade($green, 20);
$green-tint-1: tint($green, 20);
$green-tint-2: tint($green, 40);
$green-tint-3: tint($green, 60);

$orange: #bd853f;
$orange-shade-2: shade($orange, 40);
$orange-shade-1: shade($orange, 20);
$orange-tint-1: tint($orange, 20);
$orange-tint-2: tint($orange, 40);
$orange-tint-3: tint($orange, 60);

$red: #b9403e;
$red-shade-2: shade($red, 40);
$red-shade-1: shade($red, 20);
$red-tint-1: tint($red, 20);
$red-tint-2: tint($red, 40);
$red-tint-3: tint($red, 60);
```

この方が直感的。
あとはこの変数をBootstrapで初めから設定されている変数に
ぶち込んでやればサイトのカラーはこれで完結できる。

上記で作ったファイルを読み込ませるには、
`/app/assets/stylesheets/_bootstrap-custom.scss` の

```
@import "bootstrap/variables";
```

を

```
@import "bootstrap-custom/variables";
```

に書き換えれば適用される。


はあ、胃カメラ怖い！