Bootstrap テーマ

Sass 変数を使って, 簡単なテーマやコンポーネントの変更して Bootstrap をカスタマイズします。

イントロダクション

Bootstrap 3 では, LESS, カスタム CSS および dist ファイルに含まれていたテーマ用スタイルシートの変数を上書きすることによってテーマを設定していました。Bootstrap 4 は Bootstrap 3 とは少し異なるアプローチで使い慣れた方法を提供します。

Bootstrap 4 は Sass 変数, Sass マップおよびカスタム CSS によってテーマを設定します。テーマ専用のスタイルシートはありません。代わりに, 組み込みのテーマでグラデーションやシャドウを追加することができます。

Sass

Sass のソースファイルで, 変数, マップ, ミックスインなどを活用してください。

ファイル構造

Bootstrap のコアファイルはなるべく変更しないでください。Sass では独自のスタイルシートを作成して Bootstrap をインポートして, 変更・拡張することが可能です。npm のようなパッケージマネージャを使っている場合, 次のようなファイル構造になります。

your-project/
├── scss
│   └── custom.scss
└── node_modules/
    └── bootstrap
        ├── js
        └── scss

パッケージマネージャを使わずソースファイルをダウンロードしている場合は, Bootstrap のソースファイルを自分のものとは別にして, その構造を手動で同じような構造にしたいと思うでしょう。

your-project/
├── scss
│   └── custom.scss
└── bootstrap/
    ├── js
    └── scss

インポート

あなたの custom.scss では, Bootstrap の Sass ソースファイルをインポートします。Bootstrap をすべて含めるか, 必要な部分を選択するか 2 つのオプションがあります。後者を推奨しますが, コンポーネントにはいつかの要件と依存関係があることに注意してください。また, プラグイン用にいくつかの JavaScript を組み込む必要があります。

// Custom.scss
// Option A: Include all of Bootstrap

@import "../node_modules/bootstrap/scss/bootstrap";

// Custom.scss
// Option B: Include parts of Bootstrap

// Required
@import "../node_modules/bootstrap/scss/functions";
@import "../node_modules/bootstrap/scss/variables";
@import "../node_modules/bootstrap/scss/mixins";

// Optional
@import "../node_modules/bootstrap/scss/reboot";
@import "../node_modules/bootstrap/scss/type";
@import "../node_modules/bootstrap/scss/images";
@import "../node_modules/bootstrap/scss/code";
@import "../node_modules/bootstrap/scss/grid";

この設定を実行すると custom.scss 内の Sass 変数・マップを修正することができます。必要に応じて // Optional 以下に Bootstrap の一部を追加することも可能です。bootstrap.scss ファイルの全て入っている状態から編集することをお薦めします。

変数のデフォルト値

Bootstrap のすべての Sass 変数はソースコードを変更せずに自分の Sass で変数のデフォルト値を上書きできる !default フラグが含まれています。必要に応じて変数をコピー＆ペーストし, 値を変更して !default を削除します。変数がすでに割り当てられている場合, デフォルト値でにはなりません。

Bootstrap の完全な変数リストは scss/_variables.scss にあります。

同じ Sass ファイル内の変数上書きは, デフォルト値の前後に来る可能性があります。ただし, Sass ファイルを上書きするときは, Bootstrap の Sass ファイルをインポートする前に上書きする必要があります。

Bootstrap を npm で読み込んでコンパイルするときに <body> の background-color と color を変更する例を次に示します:

// Your variable overrides
$body-bg: #000;
$body-color: #111;

// Bootstrap and its default variables
@import "../node_modules/bootstrap/scss/bootstrap";

以下のグローバルオプションを含め, 任意の Bootstrap 変数に必要なだけ繰り返します。

マップとループ

Bootstrap には, 関連する CSS 群を簡単に生成できるように, いくつかの Sass マップ・キー値ペアを用意しています。Sass 変数と同様に !default フラグが含まれており, 上書きして拡張可能です。

いくつかの Sass マップはデフォルトで空のマップにマージされます。これは, 指定した Sass マップを簡単に拡張するためものものですが, マップから項目を削除しにくくなります。

マップの変更

$theme-colors マップのデフォルト色を変更するには, カスタム Sass ファイルに次の行を追加します:

$theme-colors: (
  "primary": #0074d9,
  "danger": #ff4136
);

マップの追加

$theme-colors マップの色を追加るには, 新しいキーと値を追加します:

$theme-colors: (
  "custom-color": #900
);

マップの削除

$theme-colors やその他のマップから色を削除するには map-remove を使います。Requied と Optional の間に挿入しなければいけないことに注意してください。

// Required
@import "../node_modules/bootstrap/scss/functions";
@import "../node_modules/bootstrap/scss/variables";
@import "../node_modules/bootstrap/scss/mixins";

$theme-colors: map-remove($theme-colors, "info", "light", "dark");

// Optional
@import "../node_modules/bootstrap/scss/root";
@import "../node_modules/bootstrap/scss/reboot";
@import "../node_modules/bootstrap/scss/type";
...

必須キー

Bootstrap は, Sass マップ内のいくつかの特定のキーを前提に設計されています。特定キーが含まれているマップでキーを変更すると, エラーが発生することがあります。

例えば, リンク, ボタン, フォームの状態については $theme-colors の primary, success そして danger キーを使用します。キーの値を置き換えても問題ありませんが, 削除すると Sass コンパイルで問題が発生する可能性があります。その場合は, これらのキーに依存している Sass コードを変更する必要があります。

関数(Functions)

Bootstrap はいくつかの Sass 関数を利用しますが, サブセットのみが一般的なテーマに適用されます。カラーマップから値を取得するために 3 つの関数を使っています。

@function color($key: "blue") {
  @return map-get($colors, $key);
}

@function theme-color($key: "primary") {
  @return map-get($theme-colors, $key);
}

@function gray($key: "100") {
  @return map-get($grays, $key);
}

これにより v3 のカラー変数の同様の使い方で Sass マップから 1 つの色を選択できます。

.custom-element {
  color: gray("100");
  background-color: theme-color("dark");
}

$teheme-colors マップから特定のレベルの色を作る関数もあります。負のレベルは色を明るくし, 正のレベルは色を暗くします。

@function theme-color-level($color-name: "primary", $level: 0) {
  $color: theme-color($color-name);
  $color-base: if($level > 0, #000, #fff);
  $level: abs($level);

  @return mix($color-base, $color, $level * $theme-color-interval);
}

実際には, 関数に $theme-colors の色の名前(primary や danger など)とレベル(数値)の 2 つのパラメータを渡します。

.custom-element {
  color: theme-color-level(primary, -10);
}

機能を追加したり, 独自のカスタム Sass を追加したり, Sass マップ用にレベル関数を作成したり, 汎用の関数を追加することができます。

カラーコントラスト

Bootstrap の機能でカラーコントラスト関数 color-yiq があります。YIQ color space を使用して, 指定したベースカラーに基づいて, ライト(#fff)またはダーク(#000)のコントラストカラーを自動的に返します。この関数は, 複数のクラスを生成するミックスインやループで便利です。

例えば $theme-colors マップからカラースウォッチを生成するには:

@each $color, $value in $theme-colors {
  .swatch-#{$color} {
    color: color-yiq($value);
  }
}

また, 1 回限りの用途にも使えます。

.custom-element {
  color: color-yiq(#000); // returns `color: #fff`
}

カラーマップ関数で基本色を指定することもできます:

.custom-element {
  color: color-yiq(theme-color("dark")); // returns `color: #fff`
}

Sass オプション

カスタム変数ファイルを使って Bootstrap をカスタマイズし, 新しい $enable-* Sass 変数でグローバルな CSS 設定を容易に切り替えることができます。変数の値を上書きし, 必要に応じて npm run test を実行して再コンパイルします。

scss/_variables.scss ファイルの主要オプションでカスタマイズすることができます。

Variable	Values	Description
`$spacer`	`1rem` (標準), or 0 より大きい任意の値	デフォルトのスペーサーの値, ユーティリティ：スペーサに反映されます。
`$enable-rounded`	`true` (標準) or `false`	各コンポーネントの角丸(`border-radius`)を有効にします。
`$enable-shadows`	`true` or `false` (標準)	各コンポーネントのボックスシャドウ(`box-shadow`)を有効にします。
`$enable-gradients`	`true` or `false` (標準)	各コンポーネントの `background-image` によるグラデーションを有効にします。
`$enable-transitions`	`true` (標準) or `false`	各コンポーネントのトランジション(`transition`)を有効にします。
`$enable-hover-media-query`	`true` or `false` (標準)	廃止予定
`$enable-grid-classes`	`true` (標準) or `false`	グリッドシステムの CSS クラスを有効にする(例 `.container`, `.row`, `.col-md-1` など)。
`$enable-caret`	`true` (標準) or `false`	`.dropdown-toggle` のキャレット(疑似要素)を有効にする。
`$enable-print-styles`	`true` (標準) or `false`	印刷を最適化するスタイルを有効にする。
`$enable-validation-icons`	`true` (標準) or `false`	テキストインプットおよびバリデートしたカスタムフォームの `background-image` アイコンを有効にする。

カラー

Bootstrap の様々なコンポーネントとユーティリティの多くは Sass マップで定義された色によって構築されています。このマップは Sass でループされ, 一連のルールセットをすぐに生成することができます。

すべてのカラー

Bootstrap では全ての色を Sass 変数として scss/_variables.scss ファイルの Sass マップで使用可能です。標準で入っているグレースケールと同様に追加の明度が追加されます。

Blue

Indigo

Purple

Pink

Red

Orange

Yellow

Green

Teal

Cyan

Sass でこれらを使用する方法は次の通りです:

// With variable
.alpha { color: $purple; }

// From the Sass map with our `color()` function
.beta { color: color("purple"); }

カラーユーティリティクラスは color と background-color の設定にも使用できます。

将来的には, グレースケールの色で提供されているように, 各色の陰影を変えた色を提供する Sass マップと変数が用意される予定です。

テーマカラー

scss/_variables.scss ファイルに Sass 変数と Sass マップをセットし, 全ての色を使って, カラースキーマのためのカラーパレットを作成します。

Primary

Secondary

Success

Danger

Warning

Info

Light

Dark

グレースケール

scss/_variables.scss ファイルのグレー変数と Sass マップで生成されるグレースケールの一覧を表示します。

100

200

300

400

500

600

700

800

900

scss/_variables.scss　ファイルには, カラー変数と Sass マップがあります。次に $colors Sass マップの例を示します:

$colors: (
  "blue": $blue,
  "indigo": $indigo,
  "purple": $purple,
  "pink": $pink,
  "red": $red,
  "orange": $orange,
  "yellow": $yellow,
  "green": $green,
  "teal": $teal,
  "cyan": $cyan,
  "white": $white,
  "gray": $gray-600,
  "gray-dark": $gray-800
) !default;

Sass マップの値を追加, 削除, 変更して, 各コンポーネントにどのように反映されるかを確認します。現時点では, すべてのコンポーネントがこの Sass マップを使用しているわけではありません。今後のアップデートでは, これを改善する予定です。今までは, ${color} 変数と Sass マップを使用することを検討していました。

コンポーネント

ほとんどの Bootstrap コンポーネントは @each ループで構築されており, Sass マップを繰り返し処理しています。これは $theme-colors と各ブレイクポイントのレスポンシブクラスを生成する際に役立ちます。これらの Sass マップをカスタムして再コンパイルすると, 変更した内容が自動的に反映されます。

修飾子

ほとんどの Bootstrap コンポーネントは, ベースモデルのクラスを修飾するアプローチで構築されています。これはスタイリングの大部分がベースクラス(例えば .btn)に含まれ, バリエーションは修飾子クラス(例えば .btn-danger)に限定されることを意味します。これらの修飾子クラスは $theme-colors マップから構築され, 修飾子の種類だけクラスが生成されます。

.alert コンポーネントと .bg-* ユーティリティをの修飾子を生成するために $theme-colors マップをループする 2 つの例を示します:

// Generate alert modifier classes
@each $color, $value in $theme-colors {
  .alert-#{$color} {
    @include alert-variant(theme-color-level($color, -10), theme-color-level($color, -9), theme-color-level($color, 6));
  }
}

// Generate `.bg-*` color utilities
@each $color, $value in $theme-colors {
  @include bg-variant('.bg-#{$color}', $value);
}

レスポンシブ

Sass ループはカラーに限らず, コンポーネントやユーティリティなどの様々なバリエーションを生成することができます。例えば, レスポンシブなテキスト寄せであれば, $grid-breakpoins Sass マップとメディアクエリによって構築されます。

@each $breakpoint in map-keys($grid-breakpoints) {
  @include media-breakpoint-up($breakpoint) {
    $infix: breakpoint-infix($breakpoint, $grid-breakpoints);

    .text#{$infix}-left   { text-align: left !important; }
    .text#{$infix}-right  { text-align: right !important; }
    .text#{$infix}-center { text-align: center !important; }
  }
}

$grid-breakpoints を変更すると, このマップを利用している箇所すべてに適用されます。

CSS 変数

Bootstrap には, コンパイルされた CSS に 20 以上のCSS カスタムプロパティ(変数)が含まれています。これらは, デベロッパーツール, コードサンドボックス, プロトタイピングのときに, テーマカラー, ブレイクポイント, フォントファミリーなどよく使う値に簡単にアクセスできます。

利用可能な変数

_root.scss ファイルに変数が含まれています(:root は必須です)。

:root {
  --blue: #007bff;
  --indigo: #6610f2;
  --purple: #6f42c1;
  --pink: #e83e8c;
  --red: #dc3545;
  --orange: #fd7e14;
  --yellow: #ffc107;
  --green: #28a745;
  --teal: #20c997;
  --cyan: #17a2b8;
  --white: #fff;
  --gray: #6c757d;
  --gray-dark: #343a40;
  --primary: #007bff;
  --secondary: #6c757d;
  --success: #28a745;
  --info: #17a2b8;
  --warning: #ffc107;
  --danger: #dc3545;
  --light: #f8f9fa;
  --dark: #343a40;
  --breakpoint-xs: 0;
  --breakpoint-sm: 576px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 992px;
  --breakpoint-xl: 1200px;
  --font-family-sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  --font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

例

CSS 変数は, Sass 変数と同様に柔軟に扱うことができますが, Sass とは異なりコンパイルする必要がありません。例えば, ページのフォントとリンクスタイルを CSS 変数にセットします。

body {
  font: 1rem/1.5 var(--font-family-sans-serif);
}
a {
  color: var(--blue);
}

ブレイクポイント変数

ブレークポイントの CSS 変数(例えば --breakpoint-md)は, メディアクエリでサポートされていませんが, ルールセット内で使用することができます。これらのブレークポイント変数は JavaScript で利用できる下位互換性のためにコンパイルされたファイルに残っています。詳細はこちらを御覧ください。

サポートされていない例は次のとおりです:

@media (min-width: var(--breakpoint-sm)) {
  ...
}

サポートされている例は次のとおりです:

@media (min-width: 768px) {
  .custom-element {
    color: var(--primary);
  }
}

v4.5