Edited at

Bootstrap 4を使うならSassを使って3倍幸せになろう

More than 1 year has passed since last update.

Bootstrap 4のデザインを編集するにはCSSの更新が必要ですが、CSSだけを使うよりもBootstrap 4で導入されたSassを使う方が効率的にかつ細かくデザインをカスタマイズできます。本エントリーでは、Sassを使った効率的なデザインカスタマイズ方法を紹介します。


Bootstrap 4のデザインのカスタマイズ方法

Bootstrap 4のコンポーネント機能を用い、タブとボタンを実装したコンテンツを例にとって説明します。デモはjsdo.itにアップしています。 なお、基本的なBootstrap 4の導入方法については記事「5分で導入できるBootstrap 4 超入門 〜タブを作ってみよう〜」を参照ください。

▲ Bootstrap 4を使って実装したタブとボタン

このコンテンツに、下記のデザイン更新を加えてみましょう。


  1. 全体の角丸をなくす

  2. 青い背景部分を赤い背景にする

デザイン更新には、Bootstrap 4のCSSを上書きする方法と、Sassを使う方法の2種類があります。


Bootstrap 4のCSSを上書きすると大変

Bootstrap 4のUIを構成するCSSであるbootstrap.cssのスタイルを、自前のCSSを使って上書きする方法です。角丸や青背景は複数の箇所で指定していますので、それぞれを上書きするには下記のコードが必要となります。全体のソースコードとデモの挙動はjsdo.itよりご確認ください。


自前のCSSでスタイルを上書き

/* 角丸の削除 */

.nav-tabs .nav-link,
.btn,
.btn-lg {
border-radius: 0;
}

/* primary系のカラー調整 */
.bg-primary,
.btn-primary {
background-color: #e87070 !important;
}
.btn-primary {
border-color: #e87070;
}


▲ CSSのリデザインにより角丸が消え青背景が桃色背景に

編集したい全てのクラスを一つ一つ編集する必要があり、コンテンツが増えるほど、下記の問題が深刻化します。


  1. コンテンツが大きくなるほどコードが肥大化

  2. メンテンナンス性の低下

  3. 工数の増加


Bootstrap 4のデザインカスタマイズはSassを使うべき

この問題を解決するのが、Sassを使ったデザインカスタマイズです。Sassは人気のCSSプリプロセッサー言語(※)で、CSSコーディングの品質と効率を向上させることが可能です。通常のCSSコーディングに比べて下記のような利点があります。


  • ネスト(入れ子)が使用可能

  • 変数を使用可能

  • 条件分岐(if文)やループ処理(for文、while文等)が使用可能

  • ファイルを分割可能

※ 記事「これを選んでおけば間違いない2016年流行りのCSS・JavaScript・タスクランナー」参照


Bootstrap 4から採用されたSass

Bootstrap 3ではLESSやSass+Compassを使ってCSSを記述することができましたが、Bootstrap 4からはSassのみが採用されています。ソースファイルはBootstrap4公式サイトの「Source files」からダウンロードできます。Bootstrap 3のSass版と違い、Compassに依存しません。

ダウンロードしたファイルを展開すると、scssフォルダの中にSassファイルが格納されています。各コンポーネント毎、mixin毎にSassファイルが分かれています。


全体のスタイルを変数一つで変更可能

Sassファイルの中で重要なのが_variables.scssファイル。このファイルには、デザインを管理する様々な変数が定義されていて、この変数を編集するだけで全体的なデザインの更新が可能です。

Bootstrap 4のSassのコンパイルにはwebpackGulp を用います。それぞれの設定方法は次の記事を参照ください。

各Sassファイルをコンパイルし、css/bootstrap.css を作成するものとします。


_variables.scss編集の具体的な方法

では、前述の角丸無効化と青色背景変更を行いましょう。全体の角丸の有効・無効は、_variables.scssの$enable-roundedで切り替えることが可能です。角丸を無効にしたい場合はfalseを指定します。


角丸の無効化

$enable-rounded: false;


続いて、青色背景の変更を行います。デモで指定しているbg-primaryクラスbtn-primaryクラスといったprimary系クラスのカラーは、$brand-primary変数で管理されています


primary系クラスを桃色に変更

$brand-primary: #e87070 !default;


この設定をしてコンパイルし、そのCSSを読み込むことで、全体の角丸無効化と桃色背景の変更ができます。わざわざ個別のクラスを制御する必要はありません。全体のソースコードとデモの挙動はjsdo.itよりご確認ください。

▲ たった2行の編集で角丸が消え青背景が桃色背景に


Bootstrap 4を使うならSass一択

このように、Bootstrap 4ではSassを使うほうが更新箇所が最低限で済むので、CSSを使う場合に比べて3倍の幸せがあります


  1. コードの不要な肥大化を防ぐことができる

  2. メンテンナンス性が担保される

  3. 工数の減少に繋がる

Bootstrap 4を使うなら、Sassを使って幸せなコーディングをしましょう。