此篇会介绍 Bootstrap 客制化 sass 原始码架构，着重在如何使用原始码来客制化自己的 Bootstrap 环境。

Sass 架构

官网推荐的客制化架构来讲解。

⚠️ sass 客制化档案 必要知识：

• 需要被编译的档案（汇总所有路径），档名前面 不会加下底线。（ex：main.scss、all.scss）
• 不需要被编译的档案，档名前方 会加下底线。（ex: _variables.scss、_index.scss）
• import scss 档案，档名後方 不需要副档名。（ex：@import "bootstrap/bootstrap";）

总档案

汇总所有 scss 档案路径。

官方范例这只汇总所有 scss 档案路径的档案，建议命名为 custom.scss。

我自己是习惯用 all.scss 来命名汇整所有路径的档案。（命名这种事依照自己习惯就好，但要是有意义的命名，最好一眼理解这只档案的用途）

後续将会介绍 all.scss 如何撰写。

客制化 scss

_variables.scss、_utilities.scss 自定义设置有两种方法：

1. 新增自定义设定档
2. 直接修改

两种设置方法都可以，自己习惯就好。

我自己习惯新增一个新的自定义设定档，有几个好处：

• 方便查看设置。（有利於快速找寻程序码位置）
• 避免污染到原始码。（有利於查看原始码资源）

当然直接在原始码上修改，并在後方加入注解，也是一种方法。

在开始介绍三种不同阶段的架构前，想先补充一个知识点：

撰写总档案时通常除了 component 路径之外，会把自己写的样式路径放在最後面。（ex：_index.scss）

第一阶段

all.scss 新增自定义变数 _variables.scss 档案路径。

常用变数设置有：

• 色系
• Options（预设样式）
• Spacing（间隔）
• Body
• link（连结）
• breakpoints（断点）

路径设置：

注意事项：

• _function.scss 一定要在 _variables.scss 前面，因为 _variables.scss 里面有用到 _function.scss 的方法。

推荐：

• 适合刚开始学习 Bootstrap 客制化的朋友们，透过修改 _variables.scss 变数，使 bootstrap 更加灵活。

第二阶段

all.scss 新增自定义通用类别 _utilities.scss 档案路径。

常用通用类别设定：

• responsive：是否支援响应式。
• property：通用类别对应的 css 语法。
• class：样式名称开头，若没有则会用 map 的 key 当作样式开头。
• rfs：是否启用流体缩放（随着视窗大小计算适合的尺寸）。

路径设置：

注意事项：

• 新增自定义 _utilities.scss 档案路径要放在原始码 _utilities.scss 路径 之後。

推荐：

• 适合开始想尝试将程序改为通用类别的方式呈现的朋友们。（也可以视为将样式通用类别化的学习路径之一）

第三阶段

在 all.scss 档案中，引入全部需要的路径，不再需要引入 bootstrap.scss。

路径设置：

这边分为三个区块介绍：

第一区块：结合第一、二阶段路径

• 主要用途为设置 variables、utilities 所需的路径。

第二区块：载入元件路径

• 主要为设置官方的元件载入。
• 可以参考 bootstrap.scss components 路径设置，来引入自己需要的元件路径。

列出几个我觉得必备的：

_root.scss：设置全域 css 变数。

• bs- 作为前缀避免与第三方套件的样式冲突。

_reboot.scss：css reset 设置。

• 详细可以参考我第 3 集：CSS 魔力

_type.scss：主要为文字相关的标签、样式设置。

• ex：<h1>~<h6>、<small>、<list>

_images.scss：主要为图片标签的样式设置。

• ex：<img>、<figure>

_containers.scss：容器设置。

• 详细可以参考我第 10 集：浅谈 Container Wrapper 差异

_grid.scss：格线系统设置。

• 详细可以参考我第 8 集：Gird System 格线系统

第三区块：helps、api

helps：主要为一些尚未归类到适合资料夹的样式设定。(ex：Ratios、link-color)

API：将通用类别 _utilities.scss 实作产成 css 样式的设置。

推荐：

• 适合重度客制化的朋友们，到这个阶段架构已不是问题，可以开始思考如何从 sass 原始码挖掘宝藏了。

注意事项：

• 建议对熟悉第一二阶段客制化，再尝试。
• 建议可以先复制 bootstrap.scss 来一步步删减不需要的路径，并加以理解每个路径大致做的事情，来强化自己对客制化路径的掌控度。

下一集会介绍 7+1 Pattern，如何将这个设计模式应用在客制化架构上。