直接修改$spacers变量需重新编译才生效，因bootstrap 5的间距类（如.m-3）编译后固化为固定值；运行时动态调整须改用css变量（如--bs-spacer-3）并覆盖三组规则，且优先级须高于原生样式。
为什么直接修改 $spacers Sass 变量不管用
Bootstrap 5 默认把 $spacers 编译成固定 class（如 .m-3 对应 1rem），一旦 CSS 输出完成，这些值就固化了。你改 Sass 变量再编译当然有效，但想运行时动态切换（比如暗色模式下统一放大间距）？不行——原生 Bootstrap 5 的 spacer class 不读取 CSS 变量。
真正能 runtime 调整的，只有 CSS 自定义属性本身。所以重写目标不是“覆盖变量”，而是让所有 spacer class 的 margin/padding 值从 var(--bs-spacer) 这类变量中读取。
必须重写的三个关键 CSS 规则块
Bootstrap 5 的 spacing class（.m-*、.p-*、.mx-* 等）底层都依赖 margin 和 padding 的具体数值。要让它响应 CSS 变量，得手动覆盖这三组规则：
- 基础单向类：如
.m-0到.m-5、.mt-1等 → 改成margin: var(--bs-spacer-0, 0)、margin-top: var(--bs-spacer-1, 0.25rem) - 双向类：
.mx-2→margin-left: var(--bs-spacer-2); margin-right: var(--bs-spacer-2) - 响应式类：
.m-md-3→ 必须在@media (min-width: 768px)内重写，且变量名建议带断点前缀，如--bs-spacer-md-3
注意：Bootstrap 5 默认没有定义这些 CSS 变量，你得自己在 :root 或组件 scope 里声明。
--bs-spacer 命名和层级怎么设计才不冲突
别只定义一个 --bs-spacer。Bootstrap 的 $spacers 是数组（(0, .25, .5, 1, 1.5, 3)），对应 0–5 共 6 级。CSS 变量没法直接索引，所以得显式命名：
:root {
--bs-spacer-0: 0;
--bs-spacer-1: 0.25rem;
--bs-spacer-2: 0.5rem;
--bs-spacer-3: 1rem;
--bs-spacer-4: 1.5rem;
--bs-spacer-5: 3rem;
}
如果还要支持响应式缩放（比如平板端整体 +20%），不要覆盖原变量，而是新增一套：
@media (min-width: 768px) {
:root {
--bs-spacer-1: 0.3rem;
--bs-spacer-2: 0.6rem;
--bs-spacer-3: 1.2rem;
}
}
这样既保持语义清晰，又避免媒体查询内 :root 覆盖全局导致小屏也变大。
覆盖样式必须比 Bootstrap 原生 CSS 优先级更高
Bootstrap 5 的 spacing class 选择器是纯 class（.m-3），权重为 10。你写的覆盖规则如果只是 .m-3，会被原生样式打败。必须提升优先级：
- 加
!important？不推荐，维护性差 - 用更长选择器：如
html .m-3或body .m-3（权重 20） - 放在 Bootstrap CSS 引入之后，并用
:is()包一层（现代浏览器）：:is(.m-0, .m-1, .m-2, .m-3, .m-4, .m-5) { margin: ... }
另外，确保你的自定义 CSS 文件在 <link> 标签中排在 Bootstrap CSS 之后，否则连加载顺序都救不了优先级。
最麻烦的其实是响应式类——.m-lg-4 这种需要在对应 @media 块里逐个重写，而且变量名得跟断点对齐，稍一疏忽，某个断点下的 .p-2 就会回退到 Bootstrap 默认的 0.5rem。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
