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

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

# Bootstrap 4のデザインのカスタマイズ方法
Bootstrap 4のコンポーネント機能を用い、タブとボタンを実装したコンテンツを例にとって説明します。デモは[jsdo.it](http://jsdo.it/tonkotsuboy/8PLI)にアップしています。 なお、基本的なBootstrap 4の導入方法については記事「[5分で導入できるBootstrap 4 超入門 〜タブを作ってみよう〜](http://qiita.com/tonkotsuboy_com/items/15a914f073c8f9bb1344)」を参照ください。


[![](https://qiita-image-store.s3.amazonaws.com/0/67884/0a24d568-8ced-34bc-b2d9-dfa06f7ae6ac.png)](http://jsdo.it/tonkotsuboy/8PLI)

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

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

1. 全体の角丸をなくす
2. 青い背景部分を赤い背景にする

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

#Bootstrap ４のCSSを上書きすると大変
Bootstrap 4のUIを構成するCSSである[bootstrap.css](https://cdn.rawgit.com/twbs/bootstrap/v4-dev/dist/css/bootstrap.css)のスタイルを、自前のCSSを使って上書きする方法です。角丸や青背景は複数の箇所で指定していますので、それぞれを上書きするには下記のコードが必要となります。全体のソースコードとデモの挙動は[jsdo.it](http://jsdo.it/tonkotsuboy/0ERH)よりご確認ください。

```css:自前の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;
}
```

[![](https://qiita-image-store.s3.amazonaws.com/0/67884/45da7396-c3b6-d239-b8b9-b4b6841a6d82.png)](http://jsdo.it/tonkotsuboy/0ERH)

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

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

1. コンテンツが大きくなるほどコードが肥大化
2. メンテンナンス性の低下
3. 工数の増加

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

- ネスト（入れ子）が使用可能
- 変数を使用可能
- 条件分岐（if文）やループ処理（for文、while文等）が使用可能
- ファイルを分割可能

![](https://qiita-image-store.s3.amazonaws.com/0/67884/1ae3245d-28d1-be51-9f24-c559ee8c8199.png)

※ 記事「[これを選んでおけば間違いない2016年流行りのCSS・JavaScript・タスクランナー](http://qiita.com/tonkotsuboy_com/items/26ad863bddf98ff01af5)」参照

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

[](https://qiita-image-store.s3.amazonaws.com/0/67884/b3533b91-120a-fd48-798a-987b05093fc5.png)

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

![](https://qiita-image-store.s3.amazonaws.com/0/67884/fd404232-1017-a54b-3d26-a44d4a595b9f.png)

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

![](https://qiita-image-store.s3.amazonaws.com/0/67884/cadbfcf9-d6ad-5eea-539a-57461cf51624.png)


Bootstrap 4のSassのコンパイルには[webpack](https://ics.media/entry/12140)や[Gulp](https://ics.media/entry/3290) を用います。それぞれの設定方法は次の記事を参照ください。

- [webpack入門– Bootstrapをバンドルする方法 - ICS MEDIA](https://ics.media/entry/17749)
- [Bootstrap 4のCSSコンパイルタスクをGulpで管理する方法](http://qiita.com/tonkotsuboy_com/items/564f9bb78d177483f83e)

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

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

```scss:角丸の無効化
$enable-rounded: false;
```

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

```scss:primary系クラスを桃色に変更
$brand-primary: #e87070 !default;
```

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

[![](https://qiita-image-store.s3.amazonaws.com/0/67884/45da7396-c3b6-d239-b8b9-b4b6841a6d82.png)](http://jsdo.it/tonkotsuboy/UyJy)

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


# 

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

1. コードの不要な肥大化を防ぐことができる
2. メンテンナンス性が担保される
3. 工数の減少に繋がる

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