自定义 Bootstrap Sass 组件

Question

我是一个对 Bootstrap 5 和 Sass 非常陌生的人，我真的很享受学习它们的时间！我只是有几个简单的问题...

在自定义 Bootstrap Sass 时，我知道您可以进行变量覆盖（更改某些颜色、字体等），但是在更改各种组件（例如 Bootstrap Nav 组件）时，是用我自己的更改覆盖一些预先编写的类的好习惯 - 或者我应该重写新类并在我的 HTML 中引用它们？

例如，我希望我的标题具有特定的导航，具有特定的彩色背景、悬停、字体和边框半径；但是，我不想为整个页面中使用的其他导航保持这种风格。 在这种情况下我会怎么做？

我目前的方法是创建更多自定义变量，然后为我的导航标题创建一个自定义类，其中将应用某些内容。

这也是我的主 .scss 文件的设置方式：

// Custom.scss
// Option B: Include parts of Bootstrap

// 1. Include functions first (so you can manipulate colors, SVGs, calc, etc)
@import "../node_modules/bootstrap/scss/functions";

// 2. Include any default variable overrides here

// 3. Include remainder of required Bootstrap stylesheets
@import "../node_modules/bootstrap/scss/variables";
@import "../node_modules/bootstrap/scss/mixins";

// 4. Include any optional Bootstrap components as you like
@import "../node_modules/bootstrap/scss/root";
@import "../node_modules/bootstrap/scss/reboot";
@import "../node_modules/bootstrap/scss/type";
@import "../node_modules/bootstrap/scss/images";
@import "../node_modules/bootstrap/scss/containers";
@import "../node_modules/bootstrap/scss/grid";

// 5. Add additional custom code here

感谢您的帮助！

编辑： 这是一个自定义示例。我只想为一个用例（在我的标题中）更改导航悬停选项，所以我创建了一个名为 _custom-nav.scss 的新文件，我在其中放置了这个类：

  .hover-light {
      &:hover {
        background-color: $nav-pills-hover-color;
      }
  }

然后我会在我的 HTML 中引用这个类，以便我的页面具有正确的样式。

这是不好的做法吗？我只需手动更改 Bootstraps 导航中的变量和悬停选项；但是，我的标题中的导航只需要这个悬停选项。

Answer 1

这是一个基于意见的问题，并不真正适合这种论坛 - 我相信十几个人会以十几个不同的观点回复。

到目前为止，您所做的基本工作并没有错，您可以坚持下去。关于像 Bootstrap 这样的框架要记住的是，它只是一个框架。类似于汽车底盘 - 这就是您“购买”>底盘和电机的全部内容。您当然可以驾驶它......但要充分利用它，您应该添加更多。

如何做到这一点有很多方法 - 从加载整个 BS5 核心，然后创建一个单独的 CSS 来覆盖默认值 - 称之为“插件” - 到从 BS5 SASS 编译自己的 CSS（就像你正在做的那样）。

如果您要求“最佳实践”，这也是用词不当 - 因为这也会有所不同.. 纯粹主义者会告诉您根本不应该使用 BS5，而应该从代码创建自己的 CSS对于那些说不要自定义任何东西而只使用从 bootswatch.com 获得的“主题”的人......这里没有正确的答案 - 只是意见。

您的答案介于两者之间 - 对您而言，您走在正确的轨道上。