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