bootstrap 4 scss：如何将 bootstrap 的 pb-x pm-x 值混合到自定义类中？答案

【问题标题】：bootstrap 4 scss: how to mixin the bootstrap's pb-x pm-x values to custom class?bootstrap 4 scss：如何将 bootstrap 的 pb-x pm-x 值混合到自定义类中？
【发布时间】：2019-09-28 20:10:01
【问题描述】：

我想从那里删除 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 个元素？我怎样才能做到这一点？

【问题讨论】：

标签： css sass bootstrap-4

【解决方案1】：

你试过@extend 吗？不确定以下代码是否符合您的目的。

.my-title{
    @extend .pb-4;
    @extend .pm-4;
}

您是如何在定义 .my-title 的 scss 文件中导入引导程序的？假设您在 index.scss 文件中定义 .my-title。

然后您可以在 index.scss 文件的顶部使用

导入引导程序

@import "path/to/bootstrap.css";

如果包含.css 文件不起作用，请尝试将bootstrap.css 重命名为bootstrap.scss。这肯定会奏效。现在，如果需要，您可以在导入时省略 .scss 扩展名。

@import "path/to/bootstrap";

【讨论】：

谢谢，我看了几篇不推荐使用extend的文章，因为css代码生成特定。但我会尝试一下。
一个非常有效的观点。 @extend 应该只用于占位符类而不是实际类。

【解决方案2】：

您需要使用@extend 而不是@import。 Bootstrap 中没有 pm-4 类。你是说mb-4吗？

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

https://www.codeply.com/go/4jpl7TRudJ

【讨论】：

【解决方案3】：

由于$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)

【讨论】：