Newbie Question about theming and SASS

Bootstrap Studio Help
1

Hi

Sorry, but am new to everything. I know basic html5, CSS and JS, but am new to bootstrap, BS Studio and SASS. I was hoping that BS Studio was going to make it easy to generate a custom theme for bootsrap, but am struggling a little. What I would like to do is override the default values for theme colours across my multipage project. It seems that SASS is the way to do it. So for example I want to change the default value of "dark" to a different shade, then when I use the dark option for the navbar it will use the colour I have set. I know I can modify components individually with custom css, but am trying to do it efficiently. I created a "theme.scss" file that imports an "overrides.scss" file. I tested it out by changing the background colour and it worked. Now am struggling to figure out how exactly to override the default theme colours in bootstrap. Does anybody know how I should go about this?

Also am not sure that I have set up these sass files correctly for this type of thing, if anyone has any hints on how they structure their files and import everything, that would be really appreciated!

Thanks

Richard

2

Check this out https://sass-lang.com/styleguide/code, check the links on the right as well.

At first I did a lot of searching up mixins etc.. since I also never used SASS or even LESS before this update.

What I currently do is create a "styles.scss" and then in it I put @import "globals" Then I make a "_globals.scss" file and then in it I put all my @import "_xxxx" files in it. I do a file for colors "_colors.scss" and "_layout.scss" And then I usually break out all my main design pieces in there own separate "_xxxx" file in the "_globals.scss" file in the order that I'm working on them usually :)

Any dependency SCSS files I put first in the "_globals.scss" in order and then mine after those if there are any.

Main part of the globals file

/* Vendor Dependencies */
/* Authored Dependencies */
@import "fonts";
@import "colors";
@import "mixins";
/* Patterns */
@import "layout";
/* Sections */
@import "top-bar";
@import "main-nav";

And I shouldn't forget this site as well https://css-tricks.com/sass-style-guide/ Saj