RFS incorrectly applied on body
Created by: AdrianRichardson
Prerequisites
-
I have searched for duplicate or closed issues -
I have validated any HTML to avoid common problems -
I have read the contributing guidelines
Describe the issue
In Bootstrap 5.1.3, the use of @include font-size()
to set a responsive font size to body in _reboot.scss (line 52) is not working.
The value being passed to font-size(), ie var(--#{$variable-prefix}body-font-size)
, is not something that the rfs() functions consider to be numeric. With the change in commit 4d7911a27bf9591c1f4dee53fe0b1f053646d0fd, when compiling you can no longer have a responsive value on body based on the $font-size-base
SCSS variable, you now have to override the CSS custom property --bs-body-font-size
.
I think moving the font-size()/rfs() function from _reboot.scss to _root.scss (line 44) should fix this, so instead of
:root {
--#{$variable-prefix}body-font-size: #{$font-size-base};
}
body {
@include font-size(var(--#{$variable-prefix}body-font-size));
}
you would have
:root {
@include rfs($font-size-base, --#{$variable-prefix}body-font-size);
}
body {
font-size: var(--#{$variable-prefix}body-font-size);
}
Reduced test cases
CodePen showing how the existing approach for RFS on body compares with the proposed solution
What operating system(s) are you seeing the problem on?
Windows
What browser(s) are you seeing the problem on?
No response
What version of Bootstrap are you using?
v5.1.3