Certain Bootstrap Sass color variables error with "is not a color" if used in a Sass function

[svdm]

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

Calling a Sass color function on a Bootstrap var of which the value is set to a CSS variable will error with an "... is not a color" Sass compilation error.

Given that 5.3.0 has changed the values of a lot of Sass variables to CSS variables, this breaks any code that uses those vars in places where colors are derived (which includes common mixins like button-variant). This caused no issues in 5.2.x.

I believe this is the same underlying issue as came up in the discussion on #38687 without a test case, see the one below for a minimal reproduction.

Reduced test cases

https://stackblitz.com/edit/stackblitz-starters-tetgwb?file=src%2Fstyles.scss

If that doesn't work, it can be boiled down to:

@import '../node_modules/bootstrap/scss/bootstrap';
div.foo {
    background: darken($card-bg, 20%); // Compile will error here
}

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

macOS

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

No response

What version of Bootstrap are you using?

5.3.0

[julien-deramond]

Thanks for reporting his issue @svdm. Indeed, it's in the same spirit as described in https://github.com/twbs/bootstrap/issues/38687#issuecomment-1575194577.

--test: #fd0;
background: darken(var(--test), 20%);

Generates a compilation error:

Error: $color: var(--test) is not a color.
   ╷
79 │   background: darken(var(--test), 20%);
   │               ^^^^^^^^^^^^^^^^^^^^^^^^

Back to your example, $card-bg is now set in v5.3.0 to var(--bs-body-bg) and was set to $white in v5.2.3. That's why the error now pops up. Mostly because Sass color functions don't work with custom properties as parameters defining a color.

[PSoltes]

This is also issue for example when setting color as inherit eg.

$link-color: inherit !default;
$link-hover-color: inherit !default;
$link-decoration: inherit !default;
$link-hover-decoration: inherit !default;

[jamogriff]

I ran into a similar issue on 5.3.1 when trying to override the $primary variable. I've read the docs to the best of my ability and this has worked in versions <5.1, so not sure what's going on. You can reproduce the issue here: https://stackblitz.com/edit/stackblitz-starters-qgqpiu?file=README.md

If this bug isn't in the spirit of this one, then happy to make a separate ticket. Thanks!

[PSoltes]

from 5.3.1 to 5.3.2 to 5.3.3 to 5.3.4, good thing we are moving away from bootstrap :disappointed_relieved:

[AStoker]

This issue still exists, and prohibits using bootstrap variables and mixins together. Our "solution" is currently to stick with 5.2.3. Using css variables is awesome, but the limitation it imposes here is that you CANNOT use mixins that actually need to calculate values with css variables (since it's a conflict of compile time and run time values)

[desmondblue]

``> I ran into a similar issue on 5.3.1 when trying to override the $primary variable. I've read the docs to the best of my ability and this has worked in versions <5.1, so not sure what's going on. You can reproduce the issue here: https://stackblitz.com/edit/stackblitz-starters-qgqpiu?file=README.md

If this bug isn't in the spirit of this one, then happy to make a separate ticket. Thanks!

I have created a bug for the bs-primary variable similarly. After doing quite a lot of docs/discussions scanning etc. I arrived at the conclusion that with bs 5.3.x it is relatively easy to override the $primary variable like so: $primary: orange; @import 'bootstrap'; Yet does not work. I have come to the conclusion that the manual override gets overriden by the utilities class. I just cannot place why or how.