メインコンテンツにスキップ ドキュメントナビゲーションにスキップ

Sass オプション(Options) v5.3.0オプション追加

組み込み変数を使用してBootstrapをすばやくカスタマイズし、スタイルと動作を制御するためのグローバルCSS設定を簡単に切り替える。

※"v5.0.0"での変更はv5.0.0-alpha版、v5.0.0-beta版での変更も含みます。

※"v5.2.0"での変更はv5.2.0-beta1での変更も含みます。
※"v5.3.0"での変更はv5.3.0-alpha版での変更も含みます。

組み込み済のカスタム変数ファイルでBootstrapをカスタマイズし、新しく $enable-* Sass変数でグローバルCSS設定を簡単に切り替える。変数の値を再定義し、必要に応じて npm run test で再コンパイルする。

これらの変数は、Bootstrapの scss/_variables.scss にある重要なグローバル・オプションを検出してカスタマイズできる。

変数 説明
$spacer 1rem(デフォルト)/ 0以上の任意の値 空白ユーティリティをプログラムで生成するためのデフォルトの空白値を指定
$enable-dark-mode
v5.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-motion
v5.0.0-alpha1名称変更
true(デフォルト)/ false ユーザーのブラウザ/オペレーティングシステムのプリファレンスに基づいて特定のアニメーション遷移を抑制する prefers-reduced-motion メディアクエリを有効/無効にする
$enable-grid-classes
v5.0.0-alpha1設定変更
true(デフォルト)/ false グリッドシステムのCSSクラスの生成を有効/無効にする(例:.row, .col-md-1 など)
$enable-container-classes
v5.2.0追加
true(デフォルト)/ false レイアウトコンテナのCSSクラスの生成を有効/無効にする(例:.container-* など)
$enable-caret true(デフォルト)/ false .dropdown-toggle の擬似要素キャレット()を有効/無効にする
$enable-button-pointers
v5.0.0-alpha1名称変更
true(デフォルト)/ false 無効でないボタン要素を指ポインタ()にする
※これを false に設定すると、ボタンボタンによるリストグループ閉じるボタンナビゲーションバーの切替ボタンページ送りなどのリンクのカーソルが通常のカーソル()になる
$enable-rfs
v5.0.0-alpha1名称変更
true(デフォルト)/ false グローバルでレスポンシブ・フォントサイズを有効/無効にする
$enable-validation-icons true(デフォルト)/ false テキストインプット内に background-image アイコンを有効/無効にし、検証状態に対する一部のカスタムフォームを有効/無効にする
$enable-negative-margins
v5.0.0-alpha1追加
true / false(デフォルト) マイナスのマージンユーティリティの生成を有効/無効にする
$enable-deprecation-messages
v5.0.0-beta2設定変更
true(デフォルト)/ false v6 で削除される予定の非推奨のミックスインと関数のいずれかを使用する際に警告を非表示にするには false に設定する
$enable-important-utilities
v5.0.0-alpha1追加
true(デフォルト)/ false ユーティリティクラスにおいて、接尾辞の !important を有効/無効にする
$enable-smooth-scroll
v5.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 を追加