rooty/Bootstrap
0
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-02-07 04:54: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 // Custom.scss
// Option A: Include all of Bootstrap // Option A: Include all of Bootstrap
// Include any default variable overrides here (though functions won't be available)
@import "../node_modules/bootstrap/scss/bootstrap"; @import "../node_modules/bootstrap/scss/bootstrap";
// Add custom code after this // Then add additional custom code here
``` ```
```scss ```scss
// Custom.scss // Custom.scss
// Option B: Include parts of Bootstrap // 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"; @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/variables";
@import "../node_modules/bootstrap/scss/mixins"; @import "../node_modules/bootstrap/scss/mixins";
// Include custom variable default overrides here // 4. Include any optional Bootstrap components as you like
// Optional
@import "../node_modules/bootstrap/scss/reboot"; @import "../node_modules/bootstrap/scss/reboot";
@import "../node_modules/bootstrap/scss/type"; @import "../node_modules/bootstrap/scss/type";
@import "../node_modules/bootstrap/scss/images"; @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: Here's an example that changes the `background-color` and `color` for the `<body>` when importing and compiling Bootstrap via npm:
```scss ```scss
// Required
@import "../node_modules/bootstrap/scss/functions"; @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-bg: #000;
$body-color: #111; $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/root";
@import "../node_modules/bootstrap/scss/reboot"; @import "../node_modules/bootstrap/scss/reboot";
@import "../node_modules/bootstrap/scss/type"; @import "../node_modules/bootstrap/scss/type";