Bootstrap 4自定义类中如何使用Sass间距变量设置内边距？

当然有更直观、优雅的实现方式！你提到的@extend .pl-3确实不够直接，还可能带来潜在问题——比如如果.pl-3没被其他元素使用，编译后会产生冗余CSS，或者遇到选择器优先级的困扰。

下面是两种更契合Sass变量复用思路的方案：

方案一：直接用map-get调用间距Map值 #

你已经定义了$spacers这个Map类型变量，直接借助Sass的map-get()函数就能获取对应尺寸的间距值，完全不需要依赖Bootstrap生成的辅助类：

// 你的间距变量定义
$spacer: 1rem !default;
$spacers: (
  0: 0,
  1: ($spacer * .125), // 2px
  2: ($spacer * .25), // 4px
  3: ($spacer * .375), // 6px
  4: ($spacer * .5), // 8px
  5: ($spacer * 0.75), // 12px
  6: ($spacer * 1) // 16px
);

// 给.box类设置左侧内边距
.box {
  padding-left: map-get($spacers, 3);
}

这个方式直接无依赖，完全基于你定义的变量体系，未来只要修改$spacer或$spacers里的数值，.box的内边距会自动同步更新，灵活性拉满。

方案二：封装自定义Mixin（贴近Bootstrap语法） #

如果你想让代码更贴合Bootstrap辅助类的使用习惯，可以封装一个简单的Mixin，可读性更高，也方便团队复用：

// 定义左侧内边距Mixin
@mixin pl($size) {
  padding-left: map-get($spacers, $size);
}

// 使用Mixin给.box设置样式
.box {
  @include pl(3);
}

这种写法和Bootstrap的pl-3类语法几乎一致，团队成员看代码时一眼就能明白含义；如果未来需要扩展其他方向的内边距（比如pr、pt），只要复制Mixin修改属性名即可，扩展性很强。

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