第 27 集：Bootstrap 客制化 reboot 重置

此篇会介绍 Bootstrap 使用的 css reset 档案 _reboot.scss。

事前准备

css reset 基础概念

还不懂 css reset 的朋友，建议先阅读事前准备的文章，再继续阅读会更好消化呦。

Normalize

Normalize 是一个开源的 project
Bootstrap reboot 样式，是建立於 Normalize.css 基础之上。

优点

保留一些预设的 HTML 标签的样式。（ex：body padding、h1~h6）
详细的文件以及清楚明了的注解。

缺点

样式清的不够乾净。

原始码

使用到一只档案：

_reboot.scss：主要清除 css 样式。

介绍几个有趣的样式设置。

box-sizing

计算元素尺寸时不受 padding、border 影响。

*,
*::before,
*::after {
  box-sizing: border-box;
}

scroll-behavior

使用锚点达到网页滚动到某个指定地方，smooth 让网页能平滑滚动到指定地方。（预设 auto，立即滚动）

@if $enable-smooth-scroll {
  @media (prefers-reduced-motion: no-preference) {
    scroll-behavior: smooth;
  }
}

Body

常用於网页全站（全域）样式设置。

<body> 标签包住所有网页元素，通常会在 body 样式中设置预设样式。

编译後的 css

body {
  margin: 0;
  font-family: var(--bs-font-family-noto-sans);
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  color: #494846;
  background-color: white;
}

依照上方范例介绍

假设我们在撰写样式时，没有设置 font-size，则预设大小就会是 1rem。

// 保留预设样式 font-size 为 1rem。
.title {
  color: #000;
}

则依照权重高低来决定覆盖顺序。（css 权重概念欢迎参考此篇介绍）

// 覆盖 font-size 样式为 0.85rem。
.title {
  font-size: 0.85rem;
  color: #000;
}

Typography

举例 h1~h6 标签

预设变数

$headings-margin-bottom:      $spacer / 2 !default;
$headings-font-family:        null !default;
$headings-font-style:         null !default;
$headings-font-weight:        500 !default;
$headings-line-height:        1.2 !default;
$headings-color:              null !default;

预设样式 %heading

%heading {
  margin-top: 0; // 1
  margin-bottom: $headings-margin-bottom;
  font-family: $headings-font-family;
  font-style: $headings-font-style;
  font-weight: $headings-font-weight;
  line-height: $headings-line-height;
  color: $headings-color;
}

// h1~h6 都是使用 %heading 样式，指差别在於 font-size 值不同
h1 {
  @extend %heading;
  @include font-size($h1-font-size);
}

编译後的 css

// 由下样式可以得知 %heading 样式设置结果
h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6 {
  margin-top: 0;
  margin-bottom: 0.5rem;
  font-weight: 500;
  line-height: 1.2;
}

// 透过 @include font-size() 函式，来设置彼此的 font-size 样式

h1, .h1 {
  font-size: calc(1.375rem + 1.5vw);
}

@media (min-width: 1200px) {
  h1, .h1 {
    font-size: 2.5rem;
  }
}

上述介绍了几个 _reboot.scss 的样式，大家想了解更多欢迎从原始码下手，复制样式出来编译，并查看编译後的 css 样式为何，透过这种方式可以加速了解 _reboot.scss 的结果以及作用。