rooty/Bootstrap
0
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-01-30 22:52:24 +01:00
Code Issues Actions Packages Releases Activity

Manually backport #33386 to v4 to properly document Sass default variables

Browse Source
This commit is contained in:
Mark Otto 2021-03-17 12:02:01 -07:00 committed by Mark Otto
parent e16b06929a
commit 51c8b91d91
1 changed files with 14 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
site/content/docs/4.6/getting-started/theming.md
View File

@ -49,23 +49,27 @@ In your `custom.scss`, you'll import Bootstrap's source Sass files. You have two
// Custom.scss
// Option A: Include all of Bootstrap
// Include any default variable overrides here (though functions won't be available)
@import "../node_modules/bootstrap/scss/bootstrap";
// Add custom code after this
// Then add additional custom code here
```
```scss
// Custom.scss
// Option B: Include parts of Bootstrap
// Required
// 1. Include functions first (so you can manipulate colors, SVGs, calc, etc)
@import "../node_modules/bootstrap/scss/functions";
// 2. Include any default variable overrides here
// 3. Include remainder of required Bootstrap stylesheets
@import "../node_modules/bootstrap/scss/variables";
@import "../node_modules/bootstrap/scss/mixins";
// Include custom variable default overrides here
// Optional
// 4. Include any optional Bootstrap components as you like
@import "../node_modules/bootstrap/scss/reboot";
@import "../node_modules/bootstrap/scss/type";
@import "../node_modules/bootstrap/scss/images";
@ -86,18 +90,17 @@ Variable overrides must come after our functions, variables, and mixins are impo
Here's an example that changes the `background-color` and `color` for the `<body>` when importing and compiling Bootstrap via npm:
```scss
// Required
@import "../node_modules/bootstrap/scss/functions";
@import "../node_modules/bootstrap/scss/variables";
@import "../node_modules/bootstrap/scss/mixins";
// Your variable overrides
// Default variable overrides
$body-bg: #000;
$body-color: #111;
// Bootstrap and its default variables
// Required
@import "../node_modules/bootstrap/scss/variables";
@import "../node_modules/bootstrap/scss/mixins";
// Optional
// Optional Bootstrap components here
@import "../node_modules/bootstrap/scss/root";
@import "../node_modules/bootstrap/scss/reboot";
@import "../node_modules/bootstrap/scss/type";