1. Bootstrapの文字サイズなどをカスタマイズする方法 SASS(SCSS)
フロントエンドの知識ゼロからブログを開始して色々なスキルを習得しました。
そのなかでも難しく感じたのがBootstrapとスタイルシートです。
色々試しては見るのですが思い通りに動作しなかったり効率的なファイル管理方法に悩みました。
今回は習得したスキルの中でも大事だと感じているBootstrapのカスタマイズ方法についてご紹介します。
SASS（SCSS）を使用してカスタマイズします。
知識スキルゼロのはじめの頃はこのような実装例は思いつかず、更には問題すら感じることができなかったので今ご紹介できることが嬉しいです。
-
実装例
-
なぜこのような実装なのか？
-
別の実装方法時の問題点
の順にご説明します。
2. 実装例
早速ですが実装例です。bootstrapのHタグの文字サイズが大きすぎるのでカスタマイズしてみます。
2.1. ディレクトリ構成
.
└── custom.scss
└── bootstrap-4.4.1
└── scss
├── mixins
├── utilities
└── vendorカスタマイズする内容を記述するcustom.scssを作成します。
また、bootstrapのscssを同フォルダに設置します。
2.2. custom.scss
$font-size-base: 1.1rem; // Assumes the browser default, typically `16px`
$h1-font-size: $font-size-base * 1.3;
@import "bootstrap-4.4.1/scss/bootstrap";今回はh1のフォントサイズを変更します。bootstrapのh1のフォントサイズは大きすぎますよね。
$h1-font-sizeの倍率を変更しています。
3. なぜこのような実装なのか？
custom.scssからbootstrap.cssをimportします。
custom.scssで予め変数を定義しておくことで_variables.scssの変数を上書きすることができます。
ポイントはBootstrapのファイルを変更しないことです。
4. 別の実装方法時の問題点
bootstrapのファイルを変更した場合、最新のBootstrapをダウンロードして更新すると変更した部分が元に戻ってしまいます。
例えば_variablesを直接変更したとします。
このファイルが上書きされないように注意しなければならず管理が大変です
提供されるフレームワークのカスタマイズは最小限（できればしない）にするべきです。
5. まとめ
SCSSを使用することでBootstrapを簡単にカスタマイズすることができます。
BootstrapやSCSSは最初は難しそうで敷居が高いけどなれてしまえばとても便利です。
こちらの情報がご参考になれば幸いです。
今回は以上です。