Bootstrap variables are predefined variables provided by Bootstrap, which can be used to customize and theme the Bootstrap framework.
Use Bootstrap variables when:
Sass variables are custom variables that you define in your Sass files.
Use Sass variables when:
If you want to change a variable, first try to change it in theme.css. If the variable isn't defined there and there is no Bootstrap variable that can be accessed, make use of the _custom-variables.scss file. There you can directly override existing Sass variables or create your own.
theme.css
_custom-variables.scss
This file is used to overwrite Bootstrap variables with your own custom values. These variables are available globally and can be used to customize Bootstrap's default styles.
This file is used to add custom colors and spacing by merging them into Bootstrap's default maps. It allows for optimized and extended spacing and other customizations.
This file leverages CSS variables to define theme-specific customizations that can be applied in the project's root or specific components. It includes Bootstrap's root variables and additional custom variables for theme consistency.