diff options
| author | Mark Otto <[email protected]> | 2021-03-17 12:02:01 -0700 |
|---|---|---|
| committer | Mark Otto <[email protected]> | 2021-03-18 18:57:12 -0700 |
| commit | 51c8b91d91ed2806c1dba0f75d6a19e80390cd7e (patch) | |
| tree | 525e875150dee3a5221b61bf3641456d68871d9d | |
| parent | e16b06929a92fd2d3a6c62e76b2af45820a93c9b (diff) | |
| download | bootstrap-51c8b91d91ed2806c1dba0f75d6a19e80390cd7e.tar.xz bootstrap-51c8b91d91ed2806c1dba0f75d6a19e80390cd7e.zip | |
Manually backport #33386 to v4 to properly document Sass default variables
| -rw-r--r-- | site/content/docs/4.6/getting-started/theming.md | 25 |
1 files changed, 14 insertions, 11 deletions
diff --git a/site/content/docs/4.6/getting-started/theming.md b/site/content/docs/4.6/getting-started/theming.md index 4b6682d72..8d558d7e3 100644 --- a/site/content/docs/4.6/getting-started/theming.md +++ b/site/content/docs/4.6/getting-started/theming.md @@ -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"; |