自定义引导 Sass 组件

Question

I'm someone who is very new to Bootstrap 5 and Sass, and I've been really enjoying my time learning them both. I just have a quick couple of questions...

When it comes to customizing Bootstrap Sass, I know you can do variable overrides (to change certain colors, fonts, etc.), but when it comes to making changes to various components (such as Bootstraps Nav component), is it good practice to override some of the prewritten classes with my own changes - or should I rewrite new classes and just reference them in my HTML?

For example, I want to have a specific nav for my header with a certain colored background, hover, font, and border radius; however, I don't want to maintain that style for the other navs used throughout my page. What would I do in this instance?

My current approach is to just create some more custom variables, and then create a custom class for my nav header where certain things will be applied.

Here is how my main.scss file is set up as well:

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

Thanks for your help!

Edit: Here's an example of a customization . I wanted to change the nav hover option for only one use case (in my header), so I created a new file called _custom-nav.scss where I put this class:

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

I would then reference this class in my HTML so that my page is properly styled.

Is this bad practice? I would just manually change the variables and hover options within Bootstraps nav; however, I only needed this hover option for the nav in my header.

Answer 1

This is an opinion based question and not really suited to this kind of forum - I'm sure a dozen ppl will reply with a dozen different views.

The basics of what you've done so far is not wrong, and you can just stick with that. The thing to remember about frameworks like Bootstrap is that it is just that - a framework. Akin it to a car chassis - that's all you're "buying" > the chassis and the motor. You can certainly drive it... but to get the most of it you should add more to it.

How that's done is many ways - from loading the whole BS5 core and then creating a separate CSS to override the default - call that a "plugin" - to compiling ones own CSS from BS5 SASS (like you're doing).

If you're asking for "best practice" that too is a misnomer - as that too will vary.. from purists who will tell you that you should not use BS5 at all and that you should create your own CSS from code to those who say don't customise anything and just use "themes" like you can get from bootswatch.com... there is no correct answer here - just opinions.

Your answer is somewhere in the middle - and for you, you're on the right track.