Sass オプション（Options） v5.3.0オプション追加
組み込み変数を使用してBootstrapをすばやくカスタマイズし、スタイルと動作を制御するためのグローバルCSS設定を簡単に切り替える。
※"v5.0.0"での変更はv5.0.0-alpha版、v5.0.0-beta版での変更も含みます。
※"v5.3.0"での変更はv5.3.0-alpha版での変更も含みます。
組み込み済のカスタム変数ファイルでBootstrapをカスタマイズし、新しく $enable-* Sass変数でグローバルCSS設定を簡単に切り替える。変数の値を再定義し、必要に応じて npm run test で再コンパイルする。
これらの変数は、Bootstrapの scss/_variables.scss にある重要なグローバル・オプションを検出してカスタマイズできる。
| 変数 | 値 | 説明 |
|---|---|---|
$spacer |
1rem（デフォルト）/ 0以上の任意の値 |
空白ユーティリティをプログラムで生成するためのデフォルトの空白値を指定 |
$enable-dark-modev5.3.0追加 |
true（デフォルト）/ false |
プロジェクトとそのコンポーネント全体でビルトインのダークモードをサポートできるようにする |
$enable-rounded |
true（デフォルト）/ false |
様々なコンポーネントで定義済の border-radius スタイルを有効/無効にする |
$enable-shadows |
true / false（デフォルト） |
様々なコンポーネントで定義済の装飾的な box-shadow スタイルを有効/無効にする。フォーカス状態に使用される box-shadow には影響しない |
$enable-gradients |
true / false（デフォルト） |
様々なコンポーネントで background-image 経由で定義済のグラデーションを有効/無効にする |
$enable-transitions |
true（デフォルト）/ false |
様々なコンポーネントで定義済の transition を有効/無効にする |
$enable-reduced-motionv5.0.0-alpha1名称変更 |
true（デフォルト）/ false |
ユーザーのブラウザ/オペレーティングシステムのプリファレンスに基づいて特定のアニメーション遷移を抑制する prefers-reduced-motion メディアクエリを有効/無効にする |
$enable-grid-classesv5.0.0-alpha1設定変更 |
true（デフォルト）/ false |
グリッドシステムのCSSクラスの生成を有効/無効にする（例：.row, .col-md-1 など） |
$enable-container-classesv5.2.0追加 |
true（デフォルト）/ false |
レイアウトコンテナのCSSクラスの生成を有効/無効にする（例：.container-* など） |
$enable-caret |
true（デフォルト）/ false |
.dropdown-toggle の擬似要素キャレット()を有効/無効にする |
$enable-button-pointersv5.0.0-alpha1名称変更 |
true（デフォルト）/ false |
無効でないボタン要素を指ポインタ()にする ※これを false に設定すると、ボタン、ボタンによるリストグループ、閉じるボタン、ナビゲーションバーの切替ボタン、ページ送りなどのリンクのカーソルが通常のカーソル()になる |
$enable-rfsv5.0.0-alpha1名称変更 |
true（デフォルト）/ false |
グローバルでレスポンシブ・フォントサイズを有効/無効にする |
$enable-validation-icons |
true（デフォルト）/ false |
テキストインプット内に background-image アイコンを有効/無効にし、検証状態に対する一部のカスタムフォームを有効/無効にする |
$enable-negative-marginsv5.0.0-alpha1追加 |
true / false（デフォルト） |
マイナスのマージンユーティリティの生成を有効/無効にする |
$enable-deprecation-messagesv5.0.0-beta2設定変更 |
true（デフォルト）/ false |
v6 で削除される予定の非推奨のミックスインと関数のいずれかを使用する際に警告を非表示にするには false に設定する |
$enable-important-utilitiesv5.0.0-alpha1追加 |
true（デフォルト）/ false |
ユーティリティクラスにおいて、接尾辞の !important を有効/無効にする |
$enable-smooth-scrollv5.1.1追加 |
true（デフォルト）/ false |
prefers-reduced-motionメディアクエリを経由してモーションを小さくすることを要求するユーザーを除いて、scroll-behavior: smooth（ページ内のスクロールをスムーズにする）をグローバルに適用 |
【変更履歴】
- 【v5.0.0-alpha1】
$enable-negative-margins,$enable-important-utilitiesが追加$enable-grid-classesを無効にしてもコンテナクラスの生成は無効にならなくなった$enable-prefers-reduced-motion-media-query,$enable-pointer-cursor-for-buttonsは$enable-reduced-motion,$enable-button-pointersにそれぞれ名称変更$enable-responsive-font-sizesは$enable-rfsに名称変更し、デフォルトでtrueに設定$enable-hover-media-query,$enable-print-styles（印刷を最適化するスタイル）を廃止
- 【v5.0.0-beta2】
$enable-deprecation-messagesのデフォルトの設定がfalseからtrueに変更
- 【v5.1.1】
$enable-smooth-scrollを追加
- 【v5.2.0】
$enable-grid-classesから$enable-container-classesを分離して追加
これにより実験的なCSSグリッドレイアウトをオプトインする場合、このオプションがfalseに設定されていない限り、.container-*クラスがコンパイルされ、コンテナもガター値を保持するようになる
- 【v5.3.0】
$enable-dark-modeを追加