From 6ed439ff7326f3912d9cbb0db9c5ec9e29dc9381 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Tue, 16 Mar 2021 15:25:38 -0700 Subject: [PATCH] Updates customize Sass docs to reflect proper placement of default variables overrides --- site/content/docs/5.0/customize/sass.md | 26 ++++++++++++++++--------- 1 file changed, 17 insertions(+), 9 deletions(-) diff --git a/site/content/docs/5.0/customize/sass.md b/site/content/docs/5.0/customize/sass.md index eda2d83fb8..0e0d3fe243 100644 --- a/site/content/docs/5.0/customize/sass.md +++ b/site/content/docs/5.0/customize/sass.md @@ -41,29 +41,35 @@ 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/root"; @import "../node_modules/bootstrap/scss/reboot"; @import "../node_modules/bootstrap/scss/type"; @import "../node_modules/bootstrap/scss/images"; @import "../node_modules/bootstrap/scss/containers"; @import "../node_modules/bootstrap/scss/grid"; + +// 5. Add additional custom code here ``` With that setup in place, you can begin to modify any of the Sass variables and maps in your `custom.scss`. You can also start to add parts of Bootstrap under the `// Optional` section as needed. We suggest using the full import stack from our `bootstrap.scss` file as your starting point. @@ -81,16 +87,18 @@ Here's an example that changes the `background-color` and `color` for the `