2019/01/14Bootstrap4のsassを使った効率良いカスタマイズ方法です。最近、Bootstrapをベースにしてサイトを開発することも多くなってきました。これまでは何も考えずに、まずはbootstrap.cssを読み込んでから開発をスタートしてたんですが、経験を重ねることで、それがあまり効率が良くないことに気がつきました。sassを使わないBootstrapのカスタマイズBootstrapをカスタマイズするにあたり、まずは「bootstrap.css」を読み込み、その後に読み込む「style.css」などで上書いていました。この手法だと「プライマリカラーを変更する」「マージントップを調整する」「角丸をあり(なし)にする」などといった基本的なカスタマイズをするときに、スタイルを上書く箇所の洗い出す作業に時間を取られたり、また、洗い出しの漏れがあって一部デザイン・レイアウトに崩れが発生したりと作業自体が煩雑になりがちでした。ちなみに、1番初めにBootstrapを触ったときは「bootstrap.css」を直接編集してた気がしますが、言わずもがな問題外ということで。sassを使ったBootstrapのカスタマイズ一方でBootstrapのsassを使うと、先ほどの基本的なカスタマイズがものすごく楽になります。「プライマリカラーを変更する」といった場合、scssファイルの1つのカラー設定を変更するだけで、もれなく全ての背景色、ボーダーカラー、フォントカラーなどのプライマリーカラーに反映されます。具体的なsassの導入方法は以下の通りです。sassの導入方法ですが、まず、公式サイトよりBootstrapのソースファイルをダウンロードします。ダウンロードしたファイルを解凍し「scss」フォルダをまるごとサイトに組み込みます。「scss」の中身は以下の通りです。※今回はsassのコンパイル方法などのお話は割愛します。mixinsutilities_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」などにコピーして、このファイルのみを編集します。ファイルの中身は以下のようになっています。"buttons";(以下略)例えばプライマリカラーを変えたい場合、「_variables.scss」からその設定箇所を見つけます。この場合は変数「$blue」ですね。!default;「bootstrap.custom.scss」のimportよりも前で変数「$blue」の値を上書きします。"mixins";(以下略)このように1行追記するだけで、コンパイル後に生成されるCSSファイル「bootstrap.custom.css」ではプライマリーカラーに関する全てのプロパティに反映されます。不要なモジュールがあれば、以下のようにコメントアウトしてしまえばモーダルに関するスタイルが組み込まれないので、「bootstrap.custom.css」のファイル容量を抑えることができます。"modal";さらには、bootstrapがバージョンアップした場合、最新のbootstrapソースファイルをダウンロードしてきて上書きし、新バージョンの「bootstrap.scss」と既存の「bootstrap.custom.scss」をマージすればアップデート完了です。効率の良い管理方法があるかもしれません。この件でsassの威力を感じることができました。コメントをキャンセルメールアドレスが公開されることはありません。コメントデータの処理方法の詳細はこちらをご覧ください。inc.Profileサイト「helog」は私がWeb制作に携わるなかでの経験を中心に記しています。前にも発生したんだよなぁ。」といった無駄な時間を省くことを目的に書き始めました。「へ」の「ログ」です。個人的な技術メモのようなものですが、みなさんの何か役に立つことがあればこの上ないです。