twitter-bootstrap - 从我的 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";

输出: