/* reset default rem 16px = 10px */
  html {  
    font-size: 62.5%;
  }
                  
   

  $font-size-base: 1.8rem;
  $grid-gutter-width: 3.2rem;
                  
   

I ran a loop from 1px to 160px (from 0.1rem to 16rem) in _vars.scss and this code generates CSS. By default, Bootstrap framework only offers spacing options from 1rem to 5rem (1rem = 16px)

$spacer: 0.1rem;
$spacers: (
  0: 0,
);
@for $i from 1 through 180 {
  $spacers: map-merge(
    $spacers,
    (
      $i: (
        $i * $spacer,
      ),
    )
  );
}
                  
   

As a result, the SCSS file converts to CSS classes like mt-0, mt-1, up to mt-160 and it stores in custom.css file. This allows me to apply specific margins and paddings directly in HTML.

 .mt-0 {
 margin-top: 0 !important;
 }
          
.mt-1 {
 margin-top: 0.1rem !important;
}
          
.mt-2 {
margin-top: 0.2rem !important;
}
          
.....................