From 3e230b706e6029e168b91e499a34a66bacdfd25e Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Mon, 5 Jan 2026 23:03:58 -0800 Subject: [PATCH] Fix some scss-docs --- scss/_root.scss | 4 +--- site/src/content/docs/content/reboot.mdx | 8 +++----- 2 files changed, 4 insertions(+), 8 deletions(-) diff --git a/scss/_root.scss b/scss/_root.scss index 7d9defb0ee..1d63d105f3 100644 --- a/scss/_root.scss +++ b/scss/_root.scss @@ -87,7 +87,6 @@ --body-color-rgb: #{to-rgb($body-color)}; --body-bg-rgb: #{to-rgb($body-bg)}; - // scss-docs-end root-body-variables --heading-color: #{$headings-color}; @@ -136,16 +135,15 @@ --form-invalid-color: #{$form-invalid-color}; --form-invalid-border-color: #{$form-invalid-border-color}; color-scheme: light; + // scss-docs-end root-form-validation-variables // Root and body - // scss-docs-start root-body-variables @if $font-size-root != null { --root-font-size: #{$font-size-root}; } @if $body-text-align != null { --body-text-align: #{$body-text-align}; } - // scss-docs-end root-form-validation-variables } @if $enable-dark-mode { diff --git a/site/src/content/docs/content/reboot.mdx b/site/src/content/docs/content/reboot.mdx index 26dd213213..9a061e0a94 100644 --- a/site/src/content/docs/content/reboot.mdx +++ b/site/src/content/docs/content/reboot.mdx @@ -18,13 +18,11 @@ Here are our guidelines and reasons for choosing what to override in Reboot: - For easier scaling across device sizes, block elements should use `rem`s for `margin`s. - Keep declarations of `font`-related properties to a minimum, using `inherit` whenever possible. -## CSS variables +## Root CSS variables -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.** +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 `` styles: -For example, consider these `:root` CSS variables for common `` styles: - - + In practice, those variables are then applied in Reboot like so: -- 2.47.3