diff options
| author | Mark Otto <markdotto@gmail.com> | 2021-03-17 01:25:38 +0300 |
|---|---|---|
| committer | Mark Otto <otto@github.com> | 2021-03-17 08:04:51 +0300 |
| commit | 6ed439ff7326f3912d9cbb0db9c5ec9e29dc9381 (patch) | |
| tree | 98de5d6c8e231d85d593dfb37fa201392b0bc43a /site | |
| parent | ddf72bc6124618e3f4b6a056503d4f51d49c928e (diff) | |
Updates customize Sass docs to reflect proper placement of default variables overrides
Diffstat (limited to 'site')
| -rw-r--r-- | site/content/docs/5.0/customize/sass.md | 26 |
1 files 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 `<body ```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; +// Required +@import "../node_modules/bootstrap/scss/variables"; +@import "../node_modules/bootstrap/scss/mixins"; + // Bootstrap and its default variables -// Optional +// Optional Bootstrap components here @import "../node_modules/bootstrap/scss/root"; @import "../node_modules/bootstrap/scss/reboot"; @import "../node_modules/bootstrap/scss/type"; |