css - Bootstrap 4 scss : how to mixin the bootstrap's pb-x pm-x values to custom class?

Question

我想从那里删除 pb-x 和 pm-x 类:

<div class="my-title pb-4 pm-4"> ... </div>

并将它们包含到我的 scss 中定义的 my-title 中，导入 bootsrap 的函数、变量、mixins:

类似于:

.my-title{
    @include pb-4;
    @include mb-4;
}

但问题是没有这样的 mixin(BS 将一些类发布为 mixin，但这次不是)。

在那里创建间距 pb-x pm-x:https://github.com/twbs/bootstrap/blob/master/scss/utilities/_spacing.scss

看起来我需要访问 $spacers 数组并引用第四个元素？我怎样才能做到这一点？

Answer 1

由于 $spacers 在 bs _variables.css 中方便地定义，我发现可以使用以下方法实现我的目标:

.my-title {
    // ...
    padding-bottom: map-get($spacers, 3); // .pb-3
    margin-bottom: map-get($spacers, 4); // .pm-4
}

还可以使用这种方式创建自定义 mixins (pb-3) 或占位符 (%pb-3) 类。我喜欢用缺少的类来扩展 bs，这些类发布了它们的变量(例如，输入颜色丢失了)，但这次我仍然使用简单的 map-get($spacers, 3)