第 5 章 主题定制

第 5 章 · 主题定制：修订量刑标准

章节摘要：前四章都在「用法」层面断案，本章拿到「立法权」——修改 Bootstrap 的默认值本身。路线有三条：Sass 变量（改一处、全局重编译，适合深度定制）、CSS 自定义属性（运行时可改，适合换肤）、纯 CSS 覆盖（不动源码，适合小修）。外加图标库与主题模板两件生态武器，以及「定制度四级」的路线裁决法。

学习目标

阅读完本章，你应当能够：

1. 说出 Sass 路线的完整流水线（引变量 → 改默认 → 再引源码 → 编译），并解释为什么变量必须写在引入源码之前；
2. 用 Sass 映射表增删断点、改容器档位宽度、替换整套主题色；
3. 用 CSS 自定义属性在运行时换主题色，说清它与 Sass 变量的生效时机差异；
4. 按定制度四级（工具类层、CSS 覆盖层、变量层、深度改造层）为任意定制需求选对路线。

核心概念速览

定制的成本排序：工具类最便宜，CSS 覆盖次之，变量重编译要构建环境，深度改造要背维护债。能判轻刑不动重刑。

子章节导航

5.1 Sass 定制：改一处变量动全局

立法层的正门。改 $primary、调间距刻度、增删断点、换容器档位，都在编译前完成，产物仍是普通 CSS。

5.2 CSS 定制：不碰源码的覆盖术

不动源码的三种手：改 CSS 自定义属性、按选择器覆盖、工具类 API 微调。重点讲清优先级陷阱。

5.3 图标库与主题模板

bootstrap-icons 一千多个 SVG 图标的三种用法，以及主题/模板生态的选型观：模板是起点不是终点。

5.4 定制思路：定制度的四级裁决

把前两节的手段整理成四级阶梯，用真实需求练「判几级」的直觉。

子章节之间的逻辑关系

三节手段加一节方法论：5.1 与 5.2 是两条并行路线（编译期与运行期），5.3 是生态补给，5.4 收拢成裁决阶梯。

需求 ──► 5.4 判级 ──► 一级 工具类 ──► 前四章已备
                 ──► 二级 CSS 覆盖 ──► 5.2 + 5.3
                 ──► 三级 变量重编译 ──► 5.1
                 ──► 四级 深度改造 ──► 5.1 进阶
​

本章知识点清单

逐条可考核，学完本章请自查：

1. 能复述 Sass 定制的四步流水线——引函数与变量文件、改默认值、再引主源码、编译——并解释变量为什么必须写在引源码之前（编译是顺序求值，晚了就取默认值）；
2. 能写出改单个主色（重定义 primary）与替换整套 theme-colors 映射（map-merge）两种写法，并说清何时必须用后者；
3. 能列出增删一个断点会牵动的下游：container 档位表、栅格类全集、工具类断点前缀都会重新生成，不是只加一行变量；
4. 能对比 CSS 自定义属性与 Sass 变量的生效时机——前者运行时可改、换肤不用重编译，后者编译期定型、产物更瘦；
5. 能识破覆盖选择器时「同权重后者胜」与「框架类特异性更高」两类优先级陷阱，并说清!important 只配当最后手段；
6. 能按体积与缓存取舍选择 bootstrap-icons 的三种用法：字体图标省请求数、内联 SVG 可控色、sprite 折中；
7. 能用三问筛掉不合适的主题模板——是否捆绑私有脚本、定制深度到哪层、升级路径是否存在；
8. 能复述定制度四级（工具类层、CSS 覆盖层、变量层、深度改造层）的定义，并对「换个品牌色」「加一个 1440 断点」两个真实需求当场判级。

前置知识与后续延伸

• 前置知识：第 1.2 节 npm 安装路线；第 4 章工具类刻度与色板（变量改的就是它们）。
• 后续延伸：第 6.4 节构建工具会接管 Sass 编译的工程化细节；第 7 章案例将按四级裁决完成一次真实定制。