Bootstrap は、Web デザイナーがサイトを迅速に構築するのに役立つ、あらかじめ構築されたコンポーネントを持つ有名なフレームワークです。 新バージョンの Bootstrap 4.2.1 では、選択したプリプロセッサとして Sass を使用しています。 このブログでは、sass 変数を使用して Bootstrap をオーバーライドする方法を理解します。

Web サイトに新しい外観を与えるために、Bootstrap スタイルをオーバーライドする必要があることは承知しています。 テーマ背景、フォント、色、間隔などの変数と同じように、出力用のScssに責任があります。 ここでは、デフォルトのBootstrapの変数をオーバーライドする必要があります。

Add Bootstrap In The Project

First of all, download bootstrap from the Bootstrap download page. その後、scssフォルダの中にvendorという名前でフォルダを作成し、その中にBootstrapを追加します。 将来、Bootstrapをアップデートしたいときに問題が発生するので、Bootstrapのファイルには何も手を加えません。 フォルダを作成したら、その中にコンパイルした bootstrap.scss を追加します。

Bootstrap-4 では、デフォルト変数のデフォルトを記述した !default フラグを使用します。 その変数をコピーし、あなたの値を追加し、変数から !default フラグを削除するだけです。

Override Variables

Bootstrap には “scss” フォルダーに独自の “_variables.scss” があり、そこには Bootstrap で使用するすべての変数が含まれています。 ここで、scssフォルダーに「abstracts」という名前のフォルダーを追加し、その中に「_custom-variables.scss」を作成します。

ここで、Bootstrap > scss > “_variables.scss” を開いてみてください。 ここではBootstrapの変数を直接変更しないので、「_variables.scss」から変数をコピーし、「_custom-variables.scss」に貼り付けます。 変数を貼り付けた後、変数に新しい値を追加することができます。

主要なテーマカラー（青）を更新し、それを「_custom-変数.scss」ファイルに定義しなければなりません。 この変数は、すべての @import ステートメントの前に来る必要があります。 Sass コードをコンパイルすると、この新しい $primary 色は $primary 変数を参照するすべてのコードで使用できます。

Modify The Default Breakpoints

Grid Breakpoints

Bootstrap breakpoints も _variables.scss ファイルで定義します。 以下はデフォルト値です:

あなたは、現在のブレークポイントを変更したり、新しいものを追加したりすることができます。 必要な値のみを追加して $grid-breakpoints 変数をオーバーライドする必要があります。

Containers Width

Bootstrap container-max-widths も _variables.scss ファイルで定義されています。 以下はデフォルト値です:

Updated in “_custom-variables.scss”

Customize The Spacing Rules

Bootstrapにはスペースの調整ができるように、一連のスペースが用意されています。 spacerと$spacer変数は、スペーシングの基本値を管理する。 更新、追加、オーバーライドが可能です。

Default Variables In Bootstrap

Override Variables

Bootstrapも同様に上書きできる多くの変数を提供している。
Table, Buttons, Forms, Dropdowns, Navbar, Pagination, Tooltips, Modals, etc…

Use Only What You Need

Bootstrap には使用できるコンポーネントがたくさんありますが、Bootstrap が提供するコンポーネントをすべて使用しなくてもよいのです。 あなたは、bootstrap を制御することができますので、必要なコンポーネントを含めてください。 もしコンポーネントを入れないのであれば、CSSファイルはより少ないコードでより軽くなります。 また、これらのコンポーネントは、将来必要なときにいつでも含めることができます。

Some Useful Variables

Bootstrap には、トグルできるいくつかの重要なグローバル オプションがあります。 border-radius、box-shadow、および gradients など。

これらの変数は scss/_variables.scss ファイルにあります。

$enable-caret: .dropdown-toggle で疑似要素のキャレットを有効にするために使用します。 border-radius の追加と削除に使用する (デフォルト: true)
$enable-shadows。 box-shadowsの追加と削除に使用 (デフォルト: false)
$enable-gradients。 background-image によるグラデーションに使用 (デフォルト: false)
$enable-transitions:グラデーションを有効にする。 トランジションの追加と削除に使用 (デフォルト: true)
$enable-grid-classes: グリッドシステム用のクラスを追加または削除するために使用 (デフォルト: true)
$enable-print-styles:

sass-options はここで確認できます:-
https://getbootstrap.com/docs/4.2/getting-started/theming/#sass-options

Conclusion

sas 変数を使用して bootstrap -saas を上書きすることがいかに簡単かを見てききました。 私たちは、ビジュアルとステップバイステップの関数で、このプロセスを通してあなたを助ける詳細なガイドを提供するように努めました。 重要な変数を見つける方法を知っていれば、ブートストラップをオーバーライドするのは超簡単です。 そして、私たちのブログを読み進めたなら、オーバーライドする準備は万端です！

。