从我的 scss 文件中使用 Bootstrap 的实用 API

Question

Bootstrap 文档解释了如何启用负边距 - 但这是针对自定义 Bootstrap 的情况。

我从 CDN 使用它，但我仍然想要这些类（例如

mt-n1

）。我想通过 mixin （或类似的东西）将它们导入到我的 scss 中。 “实用程序 API” 显示这是可能的，但我不确定如何从我的 scss 文件中调用它。

我该怎么做？

例如：

// import bootstrap
@import "~bootstrap/scss/functions";
@import "~bootstrap/scss/variables";
@import "~bootstrap/scss/mixins";
@import "~bootstrap/scss/utilities";

// generate negative margin from $utilities:"negative-margin"
// ... <---what goes here?

我尝试过

@include generate-utility("negative-margin")

但失败了。

Answer 1

您必须将 BS5 变量

$enable-negative-margins

设置为

true

并将其插入到

variables.scss

包含之前。

然后，删除所有实用程序，并仅包含您想要的实用程序，请参阅示例：

// enabling negative margins
$enable-negative-margins: true;

@import "~bootstrap/scss/functions";
@import "~bootstrap/scss/variables";
@import "~bootstrap/scss/mixins";
@import "~bootstrap/scss/utilities";

// remove all utilities and include only what you want
$utilities: (
  (
    "negative-margin": map-get($utilities, "negative-margin"),
    "negative-margin-x": map-get($utilities, "negative-margin-x"),
    "negative-margin-y": map-get($utilities, "negative-margin-y"),
    "negative-margin-top": map-get($utilities, "negative-margin-top"),
    "negative-margin-end": map-get($utilities, "negative-margin-end"),
    "negative-margin-bottom": map-get($utilities, "negative-margin-bottom"),
    "negative-margin-start": map-get($utilities, "negative-margin-start"),
  )
);

// generate utilities
@import "bootstrap/scss/utilities/api";

输出：

Answer 2

@YaroslavTrach 的答案是最好的方法，但对于那些不使用 SCSS 或在其项目中没有基于节点的构建环境的人来说，这是我一直在使用的解决方法：

我将常规的

mt-1

等类添加到我的自定义 CSS 中，并修改了它们的名称和值：

.mt-n1 { margin-top: -0.25rem !important; }
.mt-n2 { margin-top: -0.5rem !important; }
.mt-n3 { margin-top: -1rem !important; }
.mt-n4 { margin-top: -1.5rem !important; }
.mt-n5 { margin-top: -3rem !important; }

再次强调，如果您的前端确实有基于节点的构建环境，我建议您采用已接受的答案，因为它为每个断点添加了类。