如何在Bootstrap 5.3的Sass间距映射中添加自定义间距选项？

为啥你之前的写法没用？ #

你直接写$spacers: ( 6: $spacer * 4 );是把Bootstrap默认的0-5间距配置全覆盖了，相当于只留了个6的选项，但因为没有先继承默认配置，编译时Bootstrap还是用自己的默认值，所以没效果。

正确操作步骤 #

1. 保证文件引入顺序对 #

你的SCSS文件加载顺序必须是：自定义变量文件在前，Bootstrap源文件在后，比如：

// 先加载你的自定义变量
@import "your-custom-vars";
// 再加载Bootstrap的核心Sass
@import "bootstrap";

2. 用map-merge扩展默认配置 #

在你的自定义变量文件里，用Sass的map-merge()函数把默认的$spacers和你新增的选项合并，这样既保留原有0-5的间距，又加上新的6：

// 可以自定义基础间距值，也用默认的1rem
$spacer: 1rem;
// 合并默认配置与自定义项
$spacers: map-merge($spacers, (
  6: $spacer * 4
));

编译后就能用m-6、p-6、mt-6这类类了，对应的间距是4rem。

3. 要是想完全自定义所有间距 #

如果你不想用默认的0-5，想自己定义全套，那就把所有选项都写全：

$spacer: 1rem;
$spacers: (
  0: 0,
  1: $spacer * .25,
  2: $spacer * .5,
  3: $spacer,
  4: $spacer * 1.5,
  5: $spacer * 3,
  6: $spacer * 4 // 新增的选项
);

验证是否生效 #

编译完SCSS后，打开生成的CSS文件，搜索.m-6或者.p-6，能看到对应的margin或padding样式就说明成功了。

内容的提问来源于stack exchange，提问作者Dan