From 51c8b91d91ed2806c1dba0f75d6a19e80390cd7e Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Wed, 17 Mar 2021 12:02:01 -0700 Subject: [PATCH] Manually backport #33386 to v4 to properly document Sass default variables --- .../docs/4.6/getting-started/theming.md | 25 +++++++++++-------- 1 file 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 4b6682d72c46..8d558d7e32e7 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 `` 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";