Use a mixin for setting bs css variables

[stijn7621]

Prerequisites

• [X] I have searched for duplicate or closed feature requests
• [X] I have read the contributing guidelines

Proposal

In my opinion it would be nice to use some kind of a mixin to set bs css variables. For example we could use this mixin to set css variables. In this way users don't require to start the var name with the $prefix variable when they are customizing bootstrap to their own needs.

@mixin set-var($name, $value) {
    --#{$prefix}#{$name}: #{$value};
}

.card-primary {
$background: blue;
$border: if($color == $color-contrast-light, shade-color($background, 10%), tint-color($background, 10%));
$color: color-contrast($background);

    @include set-var(card-border-color, $border);
    @include set-var(card-cap-bg, $background);
    @include set-var(card-cap-color, $color);
    @include set-var(card-color, $color);
    @include set-var(card-bg, tint-color($background, 5%));
}

Motivation and context

I see a lot of repetitive variables using the $prefix variable directly in sass. In my opinion this could be better, so that users who like to customize bootstrap don't have to do much

[Blueclaus13]

Could I participate in this issue?

[julien-deramond]

Thanks for this feature request @stijn7621.

I know that we talked about something like this during the implementation of the color mode with @mdo. My personal opinion was that I don't see why it would be more helpful when you customize Bootstrap. Copying and pasting @include set-var() instead of --#{$prefix} is as repetitive. It would bring up something very specific to Bootstrap instead of using the regular declaration of custom properties. I'm not so sure in terms of readability and usage that it would be better TBH. Moreover, in the documentation (e.g. https://twbs-bootstrap.netlify.app/docs/5.3/components/accordion/#variables), we would have a list of @include set-var() which doesn't look like custom properties.

But this is only my own opinion, let's see what others think about it :)

@Blueclaus13, before launching any dev, let's wait if we agree on this new feature

[stijn7621]

Thanks @julien-deramond for your answer.

I agree in terms that with set-var it's also repetitive. However if you alter it a bit, to let it also accept key-value pair mappings, this feature could be more user-friendly. Besides, I think using a mixin instead makes the code more understandable and it gives the developer an extra fail-safe in case they forgot/misspelled the #{$prefix} or bs to set or overwrite the css variable. Below is an alternated suggestion, which also accepts keyvaluepair mappings:

@mixin set-vars($values) {
    @each $key, $value in $values {
        @include set-var($key, $value);
    }
}

.card-primary {
    @include set-vars(
        (
            card-border-color: $border,
            card-cap-bg: $background,
            card-cap-color: $color,
            card-color: $color,
            card-bg: tint-color($background, 5%)
        )
    );
}

I likely hear what others have to say about this feature!

[stijn7621]

Are there any updates on this feature?