Use Sass bootstrap semantically and selectively

Question

When it comes to Sass and Bootstrap the recommendation/advantage that is most around is, "import only what you will use, so your final css will be smaller and will contain only the bootstrap parts you are using and not the whole bootstrap."

Wow that’s great but the "million dollar question" is how to do that?

Here in my case I am using npm and have boostrap and Sass installed via npm (bootstrap in node_modules).

In the example below I have the html of a navbar, in the example bootstrap classes are applied directly to html:

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#conteudoNavbarSuportado" aria-controls="conteudoNavbarSuportado" aria-expanded="false" aria-label="Alterna navegação">
    <span class="navbar-toggler-icon"></span>
  </button>

  <div class="collapse navbar-collapse" id="conteudoNavbarSuportado">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(página atual)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Dropdown
        </a>
        <div class="dropdown-menu" aria-labelledby="navbarDropdown">
          <a class="dropdown-item" href="#">Ação</a>
          <a class="dropdown-item" href="#">Outra ação</a>
          <div class="dropdown-divider"></div>
          <a class="dropdown-item" href="#">Algo mais aqui</a>
        </div>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" href="#">Desativado</a>
      </li>
    </ul>
    <form class="form-inline my-2 my-lg-0">
      <input class="form-control mr-sm-2" type="search" placeholder="Pesquisar" aria-label="Pesquisar">
      <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Pesquisar</button>
    </form>
  </div>
</nav>

I also have a file home.Sass and home ts. which import the bootstrap and generate the final file concatenated via webpack.

home.Sass:

@import '~bootstrap';
//Importação para gerar o css

home ts.

import 'bootstrap/dist/js/bootstrap';
//importação do bootstrap.js para gerar o .js final

The example works as expected, but in this case I am importing the entire bootstrap. Another criticism they make is to use the bootstrap classes directly in html, thus losing the semantics of the class name and end up having a very polluted html code, this code is a simple example of a navbar taken from the bootstrap documentation but I have much more polluted application code than that, full of py-x, mr-auto, p-0, align-items-x among other classes. Unfortunately while searching I only found the recommendations, but no clear example of how to implement them.

Answer 1

Sorry for the "move" answer, but in this Bootstrap file you can delete the @imports that you don’t want.

After you’ve erased the @imports that you don’t want you need to recompile the .SCSS to generate your new .CSS just what you need. A tip is you rename your file .SCSS, because if you run an update or reinstall with NPM you may lose your changes as the new file will overwrite your.

But be careful, some of these @imports are fundamental to the proper functioning of the Framework, for example if you delete the import of transitions your navbar can be without the animation effects etc...

Other details you can refer to in this reply how to use for example only the Bootstrap Grid etc I’d like to just use the bootstrap grid to make it responsive

---

About the classes "soiling" the HTML

I recommend you read this answer How not to repeat CSS code

But this image already answers your question, the more class in HTML, the less code in CSS, and the less class in HTML, the more code in CSS...

And if you want to "extend" the properties of one class to another you can use the @extent

In the example below, using SCSS you can put the class property .p-0 (padding: 0) in elements with class .nav and .nav-item

.nav,
.nav-item{
  @extend .p-0;
}

More details you can see in this link that the questioner commented https://www.sitepoint.com/sass-semantically-extend-bootstrap/