Bootstrap 4 CSS customization

ja | en

Sass変数の操作

Sass変数

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

基本パラメータ

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

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

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

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

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

gradient+shadow.scss (先頭部分)
// カスタマイズ用プリセット変数を設定
$enable-gradients: true;
$enable-shadows: true;

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

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

マップ変数の操作

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

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

variables.scss (本ページのSassソース)
// 例: $theme-colorsへの追加・変更
$theme-colors: (
  // "success" をgreenからtealに変更
  "success": #20c997,
  // "custom"を追加(色の値はorange)
  "custom": #fd7e14
);

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

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

アラートサンプル(success) (色をgreenからtealに変更) - div.alert.alert-success
アラートサンプル(custom) (色はorangeに設定) - div.alert.alert-custom

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

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