如何在SCSS中引用Bootstrap 5已有类的样式值（如p-2）

Bootstrap 5的间距类（比如p-2）是基于内置SCSS变量和映射表生成的，你可以直接引用这些原生配置来复用对应值，不用硬写具体像素/rem值，后续Bootstrap的间距参数变更时，你的样式会自动同步，还不会覆盖原有样式。

有两种实用方法：

方法1：用基础变量计算取值 #

p-2对应的间距值是$spacer * 0.5，Bootstrap默认的间距刻度逻辑是：

• p-0 = 0
• p-1 = $spacer * 0.25
• p-2 = $spacer * 0.5
• p-3 = $spacer
• 以此类推

直接在SCSS里这么写即可：

.x {
  color: $gray-200; // 注意Bootstrap 5的灰色变量是$gray-100至$gray-900格式，不是$gray2
  padding: $spacer * 0.5;
}

方法2：通过$spacers映射表取值 #

Bootstrap把所有间距值存在$spacers这个SCSS映射表里，p-2对应key为2的项，用map-get()函数就能直接获取对应值：

.x {
  color: $gray-200;
  padding: map-get($spacers, 2);
}

这种方法更灵活，哪怕你自定义了$spacers的刻度（比如修改某个key对应的值），代码也能自动取到最新配置，完全不用手动调整。

注意：要确保你的SCSS文件已经导入了Bootstrap的基础变量文件（通常是_variables.scss），这样才能正常访问$spacer、$spacers这些内置变量。

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