Bootstrap の scss 変数の依存関係(色とフォントまわり)

Published: 2022/5/15


Bootstrap は、 scss を webpack などで自前でコンパイルする場合には、そのフレームワーク上の変数を、自分で指定してカスタマイズすることができるようになっている。 これは、 sass の変数を用いて実現されていて、もし開発者が指定しない場合であっても、よろしい感じの初期値が default! で設定されるような記述になっている。

https://sass-lang.com/documentation/variables#default-values

そうなると、自分でちょっとした変数をいじった場合に、それがどこまで影響していくのかを知っておくことが、これを効率的に利用する上で重要になってくる。 なので、 Bootstrap における変数のうち、特に、他の変数から default! で利用されているようなものが、どのような依存関係になっているのかを調べてみたので、整理できた範囲でここにまとめてみる。

バージョン

  • Bootstrap v4.6.1

Colors

flowchart LR; subgraph grays; $gray-100 -- 100 --> $grays; $gray-200 -- 200 --> $grays; $gray-300 -- 300 --> $grays; $gray-400 -- 400 --> $grays; $gray-500 -- 500 --> $grays; $gray-600 -- 600 --> $grays; $gray-700 -- 700 --> $grays; $gray-800 -- 800 --> $grays; $gray-900 -- 900 --> $grays; end; subgraph colors; $blue -- blue --> $colors; $indigo -- indigo --> $colors; $purple -- purple --> $colors; $pink -- pink --> $colors; $red -- red --> $colors; $orange -- orange --> $colors; $yellow -- yellow --> $colors; $green -- green --> $colors; $teal -- teal --> $colors; $cyan -- cyan --> $colors; $white -- white --> $colors; $gray-600 -- gray --> $colors; $gray-800 -- gray-dark --> $colors; end; subgraph themes; $blue --> $primary; $gray-600 --> $secondary; $green --> $success; $cyan --> $info; $yellow --> $warning; $red --> $danger; $gray-100 --> $light; $gray-800 --> $dark; $primary -- primary --> $theme-colors; $secondary -- secondary --> $theme-colors; $success -- success --> $theme-colors; $info -- info --> $theme-colors; $warning -- warning --> $theme-colors; $danger -- danger --> $theme-colors; $light -- light --> $theme-colors; $dark -- dark --> $theme-colors; end; $gray-900 --> $yiq-text-dark; $white --> $yiq-text-light;

Typography and Spacings

flowchart LR; 1rem --> $font-size-base; 1rem --> $spacer; $font-size-base -- * 1.25 --> $font-size-lg; $font-size-base -- * 0.875 --> $font-size-sm; subgraph heading fonts; $h1-font-size; $h2-font-size; $h3-font-size; $h4-font-size; $h5-font-size; $h6-font-size; end; $font-size-base -- * 2.5 --> $h1-font-size; $font-size-base -- * 2 --> $h2-font-size; $font-size-base -- * 1.75 --> $h3-font-size; $font-size-base -- * 1.5 --> $h4-font-size; $font-size-base -- * 1.25 --> $h5-font-size; $font-size-base -- * 1 --> $h6-font-size; $font-size-base -- * 1.25 --> $lead-font-size; $spacer -- * 0.5 --> $headings-margin-bottom; SmallDefault["80%"] --> $small-font-size; $small-font-size --> $blockquote-small-font-size; $font-size-base -- * 1.25 --> $blockquote-font-size; $spacer --> $spacers; $spacer --> $hr-margin-y; LineHeightDefault["1.5"]; LineHeightDefault --> $line-height-base; HeadingsLineHeightDefault["1.2"]; HeadingsLineHeightDefault --> $headings-line-height; $headings-line-height --> $display-line-height;

Tags: bootstrap

関連記事

About

エンジニアです。 仕事では Xincere Residence を作っています。 このサイトは個人のブログであり、所属団体の意見等とは関係がありません。

Tags