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
関連記事
Bootstrap はモバイルを最初に実装すると効率が良さそう。
2021/11/29
自分用 css のレイアウト決定のフローチャート
2021/5/15
素の jekyll に bootstrap 4 を導入するまでにやったこと
2019/2/27
