WEB/システム/IT技術ブログ

Bootstrap4のsassを使った効率良いカスタマイズ方法

update : 2019/01/14

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の威力を感じることができました。

B!

Comment

Comment Form

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

Monthly Archives