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;
}

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

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

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

Answer 1

由于 $spacers 是在 bs _variables.css 中方便地定义的，我发现我的目标可以通过以下方式实现:

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

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