414
Help us understand the problem. What are the problem?

More than 3 years have passed since last update.

posted at

updated at

Organization

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

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を使って幸せなコーディングをしましょう。

Register as a new user and use Qiita more conveniently

  1. You can follow users and tags
  2. you can stock useful information
  3. You can make editorial suggestions for articles
What you can do with signing up
414
Help us understand the problem. What are the problem?