diff options
| author | XhmikosR <[email protected]> | 2021-07-29 09:14:40 +0300 |
|---|---|---|
| committer | GitHub <[email protected]> | 2021-07-29 09:14:40 +0300 |
| commit | ef5336373fc2431b3d1d37cde85cd262210a1dc6 (patch) | |
| tree | e325fb4c5532b464d05780c731d0f118f2a88d7f /site/content/docs/5.0/customize/sass.md | |
| parent | 62edf07d7491684fe67a9c1e9439ed2bd10ca741 (diff) | |
| parent | c6c0bbb0b67fe89b55740a63fd10d4ad79044970 (diff) | |
| download | bootstrap-main-fod-simpler-table-structure.tar.xz bootstrap-main-fod-simpler-table-structure.zip | |
Merge branch 'main' into main-fod-simpler-table-structuremain-fod-simpler-table-structure
Diffstat (limited to 'site/content/docs/5.0/customize/sass.md')
| -rw-r--r-- | site/content/docs/5.0/customize/sass.md | 15 |
1 files changed, 10 insertions, 5 deletions
diff --git a/site/content/docs/5.0/customize/sass.md b/site/content/docs/5.0/customize/sass.md index 4039bd67c..137f1cfd8 100644 --- a/site/content/docs/5.0/customize/sass.md +++ b/site/content/docs/5.0/customize/sass.md @@ -60,16 +60,21 @@ In your `custom.scss`, you'll import Bootstrap's source Sass files. You have two // 3. Include remainder of required Bootstrap stylesheets @import "../node_modules/bootstrap/scss/variables"; @import "../node_modules/bootstrap/scss/mixins"; - -// 4. Include any optional Bootstrap components as you like @import "../node_modules/bootstrap/scss/root"; + +// 4. Include any optional Bootstrap CSS as needed +@import "../node_modules/bootstrap/scss/utilities"; @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"; +@import "../node_modules/bootstrap/scss/helpers"; -// 5. Add additional custom code here +// 5. Optionally include utilities API last to generate classes based on the Sass map in `_utililies.scss` +@import "../node_modules/bootstrap/scss/utilities/api"; + +// 6. 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. @@ -95,9 +100,9 @@ $body-color: #111; // Required @import "../node_modules/bootstrap/scss/variables"; @import "../node_modules/bootstrap/scss/mixins"; +@import "../node_modules/bootstrap/scss/root"; // Optional Bootstrap components here -@import "../node_modules/bootstrap/scss/root"; @import "../node_modules/bootstrap/scss/reboot"; @import "../node_modules/bootstrap/scss/type"; // etc @@ -156,11 +161,11 @@ To remove colors from `$theme-colors`, or any other map, use `map-remove`. Be aw @import "../node_modules/bootstrap/scss/functions"; @import "../node_modules/bootstrap/scss/variables"; @import "../node_modules/bootstrap/scss/mixins"; +@import "../node_modules/bootstrap/scss/root"; $theme-colors: map-remove($theme-colors, "info", "light", "dark"); // Optional -@import "../node_modules/bootstrap/scss/root"; @import "../node_modules/bootstrap/scss/reboot"; @import "../node_modules/bootstrap/scss/type"; // etc |