Use meta.apply and meta.get-mixin to allow "overriding" bootstrap mixins like button-variant

[web-cooking-factory]

Hi everyone,

I've got a common case. Most of the time, I need to change the way mixins like button-variant handle the variants generation.
In other words, I need to override the mixin. But, for now, the best solution I came with is to replace the original scss/_buttons.scss.

But what if the name of the mixin to apply is a variable ? This can be achieved through the sass:meta built-in module. I've just test it, It works pretty well and I think it's a nice solution. Also, applied properly, there would be no breaking changes.

So, let's take the button-variant case. We could add a scss/_mixins-variables.scss file containing this:

$mixin-button-variant: "button-variant"  !default;

In scss/_buttons.scss, we actually have that:

@each $color, $value in $theme-colors {
  .btn-#{$color} {
    @if $color == "light" {
      @include button-variant(
        $value,
        $value,
        $hover-background: shade-color($value, $btn-hover-bg-shade-amount),
        $hover-border: shade-color($value, $btn-hover-border-shade-amount),
        $active-background: shade-color($value, $btn-active-bg-shade-amount),
        $active-border: shade-color($value, $btn-active-border-shade-amount)
      );
    } @else if $color == "dark" {
      @include button-variant(
        $value,
        $value,
        $hover-background: tint-color($value, $btn-hover-bg-tint-amount),
        $hover-border: tint-color($value, $btn-hover-border-tint-amount),
        $active-background: tint-color($value, $btn-active-bg-tint-amount),
        $active-border: tint-color($value, $btn-active-border-tint-amount)
      );
    } @else {
      @include button-variant($value, $value);
    }
  }
}

Instead we could do something like this:

@use "sass:meta";

@if $mixin-button-variant {
  @each $color, $value in $theme-colors {
    .btn-#{$color} {
      @include meta.apply(meta.get-mixin($mixin-button-variant),
        $value,
        $value
      );
    }
  }
}

When using Bootstrap in a project, if my need is to change the default parameter values for instance, I can do a very simple thing:

$mixin-button-variant: "custom-button-variant";

...

@mixin custom-button-variant(
  $background,
  $border,
  $color: red,
  $hover-background: red,
  $hover-border: red,
  $hover-color: red,
  $active-background: red,
  $active-border: red,
  $active-color: red,
  $disabled-background: red,
  $disabled-border: red,
  $disabled-color: red
) {
  @include button-variant($background, $border, $color, $hover-background, $hover-border, $hover-color, $active-background, $active-border, $active-color, $disabled-background, $disabled-border, $disabled-color);
}

It also offers a simple way to disable the variants generation, by setting:

$mixin-button-variant: null;

So, what do you think ? Maybe you already thought of it. For my concern, it would resolve a lot of my problems.

Have a nice day !