How to extend native BS _variables.scss

Bootstrap Studio Help
1

HI all,

I’m following a Bootstrap course (the Brad Traversy one if someone is wandering) and instead of coding along, I try to do everithing he does in the videos using BSS since I’m a newbie and want to get familiar with it.

In a lesson he extends some utility classes in the _varibles.scss by doing this:

// spacers

$spacer: 1rem !default;
$spacers: (
  0: 0,
  1: $spacer * 0.25,
  2: $spacer * 0.5,
  3: $spacer,
  4: $spacer * 1.5,
  5: $spacer * 3,
/* up to 5 is the standard, the 3 lines below are the ones he added */
  6: $spacer * 6,
  7: $spacer * 8,
  8: $spacer * 12,
/* end of modification */
) !default;

In this way he add extra possibility for the spacing, such as having wider margins (e.g.: mb-7, px-6, pb-lg-8, etc.)

He can do so because he imports the all BS css in a bootstrap.scss

@import '../node_modules/bootstrap/scss/bootstrap';

and he makes the variations in the same file, so that when the file copiles the rules of BS are added or overwritten:

// example of overriding the default border radius of buttons:
$btn-border-radius: 50px;

@import '../node_modules/bootstrap/scss/bootstrap';

So, when the bootstrap.css is compiled, it is compiles with all the “personalizations”.

Is there a way to do this in BSS? Is there a way to access the native sass files of boostrap and import partials in a custom scss file?

All suggestions are wellcome!

2

@GPax well yes it can be done because Bootstrap Studio has a sass compiler available to compile sass files. You would add the current version source files from Bootstrap and compile a bootstrap.css file. Now you would have two bootstrap.css files active - one in the settings and one that the compiler compiled. Typically you then would import a blank css theme so you no longer have the conflict with the compiled version. When you finish working with your design and move from development to production you export your project. You will find the compiled version of sass bootstrap.compiled.css now. Import that as a theme now in settings and choose that as your theme. Go to your sass folder thats being compiled and put a _ underline in front of the bootstrap compliled file to disable it from being compiled. Now you can export again and you have your theme active with all your complete changes.

Some things to think about. Everytime Bootstrap Studio updates to a new version you will have to update all the sass files so you stay current and matched with the Bootstrap.js version. This is why you never edit the bootstrap sass files directly. Create your own directory (often blank files the same structure as the source files) to keep your custom sass changes.

You may want to consider just getting a external compiler like Prepros to work on the theme and then import into the settings. Its a lot of work but if you are willing to learn how sass is powerful that way. It can be as complex as you want or stay simple. :peanuts:

1 Like
3

Thank you @twinstream for taking the time to give this in depth answer.

I didn’t think about uploading an empty theme, I’ll try it!