Bootstrap4のsassを使った効率良いカスタマイズ方法です。
最近、Bootstrapをベースにしてサイトを開発することも多くなってきました。
これまでは何も考えずに、まずはbootstrap.cssを読み込んでから開発をスタートしてたんですが、経験を重ねることで、それがあまり効率が良くないことに気がつきました。
sassを使わないBootstrapのカスタマイズ
Bootstrapをカスタマイズするにあたり、まずは「bootstrap.css」を読み込み、その後に読み込む「style.css」などで上書いていました。
この手法だと「プライマリカラーを変更する」「マージントップを調整する」「角丸をあり（なし）にする」などといった基本的なカスタマイズをするときに、スタイルを上書く箇所の洗い出す作業に時間を取られたり、また、洗い出しの漏れがあって一部デザイン・レイアウトに崩れが発生したりと作業自体が煩雑になりがちでした。
ちなみに、1番初めにBootstrapを触ったときは「bootstrap.css」を直接編集してた気がしますが、言わずもがな問題外ということで。。
sassを使ったBootstrapのカスタマイズ
一方でBootstrapのsassを使うと、先ほどの基本的なカスタマイズがものすごく楽になります。
例えば「プライマリカラーを変更する」といった場合、scssファイルの1つのカラー設定を変更するだけで、もれなく全ての背景色、ボーダーカラー、フォントカラーなどのプライマリーカラーに反映されます。
具体的なsassの導入方法は以下の通りです。
Bootstrap sassの導入方法
Bootstrap sassの導入方法ですが、まず、公式サイトよりBootstrapのソースファイルをダウンロードします。
Download · Bootstrap
ちなみに今回の例では「Bootstrap 4.1.3」です。
ダウンロードしたファイルを解凍し「scss」フォルダをまるごとサイトに組み込みます。「scss」の中身は以下の通りです。
※今回はsassのコンパイル方法などのお話は割愛します。
mixins utilities _alert.scss _badge.scss _breadcrumb.scss _button-group.scss _buttons.scss _card.scss _carousel.scss _close.scss _code.scss _custom-forms.scss _dropdown.scss （以下略）
どのファイルを編集すればよいのかは、ドキュメントをみれば分かるのですが「色を変えたい」「マージンを変えたい」など基本的な設定は「_variables.scss」にまとめられています。
では「_variables.scss」を編集すればよいのかというと、そうではなくて、より良い運用のためにもうひと工夫必要です。
なぜなら、いろんなファイルを好き勝手に編集してしまうと、bootstrapをバージョンアップするときにマージ作業が面倒になる恐れがあります。
そこで大元となるファイル「bootstrap.scss」を「bootstrap.custom.scss」などにコピーして、このファイルのみを編集します。
ファイルの中身は以下のようになっています。
/*! * Bootstrap v4.1.3 (https://getbootstrap.com/) * Copyright 2011-2018 The Bootstrap Authors * Copyright 2011-2018 Twitter, Inc. * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE) */ @import "functions"; @import "variables"; @import "mixins"; @import "root"; @import "reboot"; @import "type"; @import "images"; @import "code"; @import "grid"; @import "tables"; @import "forms"; @import "buttons"; （以下略）
例えばプライマリカラーを変えたい場合、「_variables.scss」からその設定箇所を見つけます。この場合は変数「$blue」ですね。
$blue: #007bff !default;
「bootstrap.custom.scss」のimportよりも前で変数「$blue」の値を上書きします。
$blue: #555555; @import "functions"; @import "variables"; @import "mixins"; （以下略）
このように1行追記するだけで、コンパイル後に生成されるCSSファイル「bootstrap.custom.css」ではプライマリーカラーに関する全てのプロパティに反映されます。
また、不要なモジュールがあれば、以下のようにコメントアウトしてしまえばモーダルに関するスタイルが組み込まれないので、「bootstrap.custom.css」のファイル容量を抑えることができます。
// @import "modal";
さらには、bootstrapがバージョンアップした場合、最新のbootstrapソースファイルをダウンロードしてきて上書きし、新バージョンの「bootstrap.scss」と既存の「bootstrap.custom.scss」をマージすればアップデート完了です。
もっと効率の良い管理方法があるかもしれません。しかし、この件でsassの威力を感じることができました。