Skip to content

Commit 65a4072

Browse files
committed
Fix some scss-docs
1 parent 627a295 commit 65a4072

File tree

2 files changed

+4
-8
lines changed

2 files changed

+4
-8
lines changed

scss/_root.scss

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -87,7 +87,6 @@
8787

8888
--body-color-rgb: #{to-rgb($body-color)};
8989
--body-bg-rgb: #{to-rgb($body-bg)};
90-
// scss-docs-end root-body-variables
9190

9291
--heading-color: #{$headings-color};
9392

@@ -136,16 +135,15 @@
136135
--form-invalid-color: #{$form-invalid-color};
137136
--form-invalid-border-color: #{$form-invalid-border-color};
138137
color-scheme: light;
138+
// scss-docs-end root-form-validation-variables
139139

140140
// Root and body
141-
// scss-docs-start root-body-variables
142141
@if $font-size-root != null {
143142
--root-font-size: #{$font-size-root};
144143
}
145144
@if $body-text-align != null {
146145
--body-text-align: #{$body-text-align};
147146
}
148-
// scss-docs-end root-form-validation-variables
149147
}
150148

151149
@if $enable-dark-mode {

site/src/content/docs/content/reboot.mdx

Lines changed: 3 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -18,13 +18,11 @@ Here are our guidelines and reasons for choosing what to override in Reboot:
1818
- For easier scaling across device sizes, block elements should use `rem`s for `margin`s.
1919
- Keep declarations of `font`-related properties to a minimum, using `inherit` whenever possible.
2020

21-
## CSS variables
21+
## Root CSS variables
2222

23-
With v5.1.1, we standardized our required `@import`s across all our CSS bundles (including `bootstrap.css`, `bootstrap-reboot.css`, and `bootstrap-grid.css`) to include `_root.scss`. This adds `:root` level CSS variables to all bundles, regardless of how many of them are used in that bundle. Ultimately Bootstrap 5 will continue to see more [CSS variables]([[docsref:/customize/css-variables]]) added over time, in order to provide more real-time customization without the need to always recompile Sass. Our approach is to take our source Sass variables and transform them into CSS variables. That way, even if you don’t use CSS variables, you still have all the power of Sass. **This is still in-progress and will take time to fully implement.**
23+
We add `:root` level CSS variables to all CSS bundles to provide real-time customization without the need to always recompile Sass. For example, consider these `:root` CSS variables for common `<body>` styles:
2424

25-
For example, consider these `:root` CSS variables for common `<body>` styles:
26-
27-
<ScssDocs name="root-body-variables" file="scss/_root.scss" />
25+
<ScssDocs name="root-border-var" file="scss/_root.scss" />
2826

2927
In practice, those variables are then applied in Reboot like so:
3028

0 commit comments

Comments
 (0)