Some length value variables cannot be `calc()` or `var()` expressions

[silvertech-daniel]

Prerequisites

• [X] I have searched for duplicate or closed issues
• [X] I have validated any HTML to avoid common problems
• [X] I have read the contributing guidelines

Describe the issue

variables.scss contains variables that are CSS lengths which are later used within calculations. One such variable is $spacer which is used as a basis for $spacers, but there are many other variables such as $font-size-base. If e.g. $spacer is set to a runtime expression like calc(2vw * var(--rem-scale, 1)), sass errors when it attempts to use it in a compile-time length calculation like $spacer * .25. Luckily, sass allows runtime calculations like calc($spacer * .25). If $spacer is known at compile time, sass fully simplifies it, but it also gracefully allows runtime values to be calc()ed at runtime. Rewriting all math expressions to use calc() would be backwards compatible while enabling this flexibility. As things are now, I have to forgo setting certain bootstrap sass variables and reimplement certain variables and rules.

Reduced test cases

$spacer: calc(2vw * var(--rem-scale, 1));
// ...
@import "bootstrap/scss/variables";

What operating system(s) are you seeing the problem on?

Windows, macOS, Android, iOS, Linux

What browser(s) are you seeing the problem on?

Chrome, Safari, Firefox, Microsoft Edge, Opera

What version of Bootstrap are you using?

5.3.2

[silvertech-daniel]

In the same spirit, it also makes sense that this should work with other value types like colors