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

发布于 2025-02-01 07:41:44 字数 930 浏览 6 评论 0原文

我正在从a MT-N1 ）。我想通过Mixin（或类似的东西）将它们导入我的SCSS文件中。 “ stricility api>” m不确定如何从我的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-utity（“负微粒”），但失败了。

原文

The Bootstrap documentation explains how to enable negative margins, but that is for the case where one customises Bootstrap.

I'm using it from a CDN, but I still want those classes (e.g., mt-n1). I'd like to import them via a mixin (or something like that) into my SCSS file. The "Utility API" shows that is possible, but I'm unsure how to invoke it from my SCSS file.

How do I do that?

For example:

// 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?

I tried @include generate-utility("negative-margin") but that failed.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

蝶舞 2025-02-08 07:41:45

您必须将Bootstrap 5变量设置$ enable-congative-margins true，然后在variables.scss.scss include之前插入它。

然后，删除所有实用程序，仅包括您想要的公司，请参见示例：

// 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";

“在此处输入图像说明”

You have to set the Bootstrap 5 variable $enable-negative-margins to true and insert it before variables.scss include.

Then, remove all utilities, and include only ones you want, see example:

// 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";

Output:

回复收藏 0 原文

南七夏 2025-02-08 07:41:45

我在我的自定义CSS内容中添加了常规MT-1等

.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.js的构建环境的前端，我建议Yaroslavtrach的答案，因为它为每个断点添加了类。

YaroslavTrach's answer is the best approach, but for those who don't use SCSS, or don't have a Node.js-based build environment in their project, here's a workaround I had been using:

I added the regular mt-1, etc. classes to my custom CSS content, and modified their names and values:

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

Again, if you do have a Node.js-based build environment for your frontend, I recommend YaroslavTrach's answer as it adds classes for every breakpoint.

回复收藏 0 原文

~没有更多了~