--body-color-rgb: #{to-rgb($body-color)};
--body-bg-rgb: #{to-rgb($body-bg)};
- // scss-docs-end root-body-variables
--heading-color: #{$headings-color};
--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 {
- 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 `<body>` styles:
-For example, consider these `:root` CSS variables for common `<body>` styles:
-
-<ScssDocs name="root-body-variables" file="scss/_root.scss" />
+<ScssDocs name="root-border-var" file="scss/_root.scss" />
In practice, those variables are then applied in Reboot like so:
projects / thirdparty / bootstrap.git / commitdiff
