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

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

Sass 路线是定制的立法层正门：先声明自己的默认值，再引入 Bootstrap 的 Sass 源码整体编译。改一个 $primary，全部按钮、链接、焦点环、强调色同时换装；改一个 $grid-gutter-width，全站栅格沟槽重新计算。产出仍是普通 CSS，浏览器侧零负担。

位置：定制章的第一案。第 4 章结尾留了伏笔——「颜色类背后是变量」；本节兑现：变量在哪、怎么改、改了怎么生效。

立法现场：变量必须写在引源码之前

图 5-1 Sass 编译流水线

// 入口文件的最小骨架：先覆盖，后引入
// 一、改主题色：全站 primary 从蓝紫换成青绿
$primary: #0f9d8f;
$border-radius: 0.5rem;      // 全局圆角档位上调
$enable-shadows: true;       // 打开阴影体系（默认关闭，开了才有工具类阴影可判）

// 二、改断点与容器档位：立法级修订
$grid-breakpoints: (
  xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px, xxl: 1400px
);
$container-max-widths: (
  sm: 520px, md: 690px, lg: 930px, xl: 1110px, xxl: 1290px
);

// 三、最后一步才是引源码：全量入口
@import "bootstrap/scss/bootstrap";
// 编译命令由构建工具执行（第 6.4 节），产物是普通 CSS
​

!default 是整个机制的枢纽：它给每个变量装了「缺省才生效」的开关。你的声明在前就抢先把开关拨掉，框架源码编译时取到的已是你的值。顺序错了不报错、只是不生效——这是 Sass 定制第一大悬案，病根全在引源码与声明的前后关系。

三个高频立法案

// 案一：主题色整套替换（映射表级立法，比单变量更彻底）
$theme-colors: (
  "primary": #0f9d8f,
  "secondary": #5c6f7f,
  "success": #2e9e5b,
  "info":    #3a7cc0,
  "warning": #d9900c,
  "danger":  #c94f4f,
  "light":   #f6f8fa,
  "dark":    #22313f
);
// 效果：text-bg-*、btn-*、alert-* 全族按新表派生，含各自的浅色与强调色变体

// 案二：间距刻度修订（第 4.1 节的刻度尺由它定义）
$spacer: 1rem;               // 基准单位
$spacers: (                  // p-4 从 24px 提到 28px，其余保持
  0: 0, 1: $spacer * 0.25, 2: $spacer * 0.5,
  3: $spacer, 4: $spacer * 1.75, 5: $spacer * 3
);

// 案三：按需裁剪（只编译要用的模块，产物从两百 KB 级降到几十 KB）
// 不引全量入口，改引功能件：
@import "bootstrap/scss/functions";
@import "bootstrap/scss/variables";
@import "bootstrap/scss/mixins";
@import "bootstrap/scss/reboot";     // 基础重置，几乎必引
@import "bootstrap/scss/grid";       // 栅格
@import "bootstrap/scss/buttons";    // 按钮
@import "bootstrap/scss/card";       // 卡片
// 效果：产物里没有 modal、轮播等未引模块的任何字节
​

⚠️ 常见坑二则：其一，改 $grid-breakpoints 前必须先引 functions 与 variables 两个前置件（映射表的键会被校验），直接抄网上「三行改断点」的片段常因缺前置件而编译报错。其二，5.x 新版编译器推荐用 @use 替代 @import，两者语法不兼容，抄示例先看清对方用的哪套。

取证：验证立法是否生效

编译后做两步核验。第一步，产物里搜主题色值：文件里应出现你定义的色值而非默认 #0d6efd。第二步，页面挂 1.2 节的断点观察台：改过容器档位的话，把窗口拖过 992px，正文区宽度应在新档位（如 930px）封顶。两证齐全，立法生效；任一缺失，先查声明顺序，再查是否引对了入口。

变式：需求升级的三次加刑

变式一：只换品牌色、其余默认——保留默认映射表，仅重声明 $primary 与 $theme-colors 里的 primary 一项（映射表可以局部覆盖，框架会合并）。变式二：新增一档 3xl 断点——在 $grid-breakpoints 与 $container-max-widths 两张表同步加键，全册三段式类名（col-3xl-* 等）自动可用。变式三：双主题（白天/夜晚）——Sass 只能编译出一套，运行期切换判给 5.2 节的 CSS 自定义属性路线，两节合用才是完全体。

交付：产物进仓库前查三件事

定制流水线的最后一公里是交付。编译产物（那个普通 CSS 文件）进版本库之前，固定查三项：一看体积——若从几十 KB 涨回两百 KB 级，说明有人绕过定制入口直接引了全量文件，立法被架空；二看 sourcemap——开发环境开着、生产构建关掉，否则线上排查时样式面板会把压缩后的行号指错；三看入口唯一——仓库里只允许一个定制入口文件，散落的第二入口意味着两套「法典」并存，日后谁也说不清哪条规则从哪来。

团队协作的配套约定也在这里立：定制入口文件顶部用注释维护一张「变量变更台账」，谁、何时、为何改了哪个值，一行一条。Sass 变量的伤害不在写错（编译期就报错），而在改对了一处、连坐了一片——台账让你在「全站按钮突然变圆」时能两分钟定位到那行 $border-radius。这条纪律在第 6.4 节构建工程化时会升级成流水线检查项，先在这里养成手动习惯。

台账还有个隐形约束值得写明：只记变量不够，配套记下「改动的动机与验收方式」。例如那行圆角变量的台账补一句「设计走查要求卡片 8px、按钮保持默认」——半年后另一个项目想复用这份定制，才知道哪些值是品牌决定、哪些是当时拍脑袋，搬运时不至于把过期决策也一起带走。

结案要点

• 流水线三步：声明覆盖在前、引源码在后、编译成普通 CSS；!default 是生效开关；
• 映射表立法管整套（主题色、断点、容器档位、间距刻度），单变量立法管一处；
• 按需裁剪从入口处减体积，前置三件（functions/variables/mixins）不可省；
• 验证看两证：产物色值、观察台档位宽度；
• 运行期换肤不是 Sass 的辖区，判给下一节的 CSS 自定义属性。