Sass変数

BootstrapソースコードのSass変数は_variables.scssに!defaultオプション付きで定義されている。これらを操作することによりBootstrapのスタイルをカスタマイズすることができる。

基本パラメータ

次の変数はスタイル全体に影響する基本パラメータ。

• $font-size-base : フォントサイズの基準(デフォルト値 1rem)、全てのフォントサイズに影響を与える
• $spacer : 空間ユーティリティの基準単位(デフォルト値 1rem)

// 例: 全体的にフォントサイズを1割小さくする
$font-size-base: 0.9rem;

// Bootstrapをインポート
@import "bootstrap/scss/bootstrap";

カスタマイズ用プリセット変数

カスタマイズ用のプリセット変数があり、これらは$enable-で始まる名前を持つ。一覧は公式ドキュメントのSass optionsを参照。例えばグラデーションとシャドウの効果はデフォルトでは無効(false)に設定されているが(バージョン4.1.1の場合)、次のように有効化できる。

// カスタマイズ用プリセット変数を設定
$enable-gradients: true;
$enable-shadows: true;

// Bootstrapをインポート
@import "bootstrap/scss/bootstrap";
...

これらを有効化した場合の表示効果の違いはグラデーションとシャドウを参照(実際に違いを比較できる)。

マップ変数の操作

Sass変数には様々な型の値を設定できる(言語マニュアルのData Typesを参照)。Bootstrapソースが用いている変数は大部分スカラー型(数、文字列、色、真偽値、null)だが、次の変数はキー/値のマップ型で定義されている。

• $grays : グレースケールのプリセット値
• $colors : 基本色 (blue, indigo, purple, ...)
• $theme-colors : Bootstrapのテーマ色 (primary, secondary, success, ...)
• $spacers : 空白ユーティリティのプリセット値
• $sizes : サイズユーティリティのプリセット値
• $grid-breakpoints : グリッドのブレークポイント(ビューポート幅)プリセット値
• $container-max-widths : グリッドの各ブレークポイントに対しコンテナ に設定される幅

これらの値も変更可能で、追加や値の変更は次のように容易に行うことができる。

// 例: $theme-colorsへの追加・変更
$theme-colors: (
  // "success" をgreenからtealに変更
  "success": #20c997,
  // "custom"を追加(色の値はorange)
  "custom": #fd7e14
);

// Bootstrapをインポート
@import "bootstrap/scss/bootstrap";

次は実際に設定したもののサンプル(Bootstrapデフォルト状態と比較すること ⇒ 公式ドキュメントのOfficial document examplesを参照).

逆に(使わない)キーを削除することも可能だがやや難しくなる(ただしこれが必要になることはあまりないので以下参考)。これにはまずSass組み込み関数の知識が必要。マップの操作は組み込み関数を用いる(言語マニュアルのmap-functionsまたはmap-remove($map, $keys...)を検索すればその付近に説明がある)。

またBootstrapのインポートは全体丸ごとではなくパーシャルごとに行う必要がある。コード例が公式ドキュメントのRemove from mapにあるので参照すること。