使用我的 scss 文件中的 Bootstrap 实用程序 API

Question

Bootstrap 文档解释了如何 enable 负边距 - 但这是针对自定义 Bootstrap.

的情况

我正在从 CDN 使用它，但我仍然想要那些类（例如 mt-n1）。我想通过混合（或类似的东西）将它们导入我的 scss。 "Utility 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 或在他们的项目中没有 node-based 构建环境的人添加它。

我将常规 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; }

但是，如果您的前端确实有 node-based 构建环境，我推荐接受的答案，因为它为每个断点添加了类。

使用我的 scss 文件中的 Bootstrap 实用程序 API

Use Bootstrap's utility API from my scss file

sass

twitter-bootstrap

scss-mixins

bootstrap-5